SEO-Friendly Fonts

By March 8, 2010 SEO

I made a discovery over the weekend that has pretty big implications for my website design.  There has always been a limitation in designing Search Engine Optimized (SEO) websites and using different fonts.  As a designer, I tell the web browser which font to pull for a particular website.  That user’s computer must have that font loaded for the page to show as intended.  If the user does not have that font, then it goes to another font such as any sans-serif font loaded on that user’s computer.

In order to make sites that show up the same on most user’s computers, you are thus limited to very few fonts that you can use (Times New Roman, Arial, Verdana, Helvetica to name a few).

One way around this is to create an image of the text in the font that you like and insert that into the page.  The problem with this is that Google can’t read the text within an image.  They can read the alt text for that image, but placing “Atlanta Plumber” within <h1> tags places more weight on the term than having a fancy font image say the same words.

So, to make search engine friendly sites, one had to use a handful of fonts that limited design capabilities.

Until now…

Cufon has introduced a simple Javascript-based solution that solves the design and SEO problems.  This solution transforms text on a page into your font of choice while keeping the actual text within the code of the page.

If you have an <h1> tag around “Atlanta Plumber,” you can now specify the exact font to use and Atlanta Plumber will still show up as an <h1> tag in your code for SEO purposes.

Below, I have listed the basic instructions on how to implement this into your website.  This solution works in all major browsers (IE 6.0 and up, Firefox, Safari, Chrome, Opera).  You can also utilize this feature using a basic HTML website or for a website using a content management system such as WordPress or Joomla.

Instructions
  1. Locate a font of your choice at Font Squirrel.  Font Squirrel offers an array of fonts that are 100% free for commercial use.
  2. Download this font.  It’s in a zip file and the actual font will be in an .otf or .ttf format.
  3. Copy this javascript code and place it at the root level of your website (FTP client required) in a javascript file titled cufon-yui.js.
  4. Use the font file generator to transmit your font of choice into a JavaScript file.
  5. Upload this generated JavaScript file to the root level of your website.
  6. Place this code within the <Head> section of your website:
  7. <script src="cufon-yui.js" type="text/javascript"></script>
    <script src="Vegur_300.font.js" type="text/javascript"></script>
    <script type="text/javascript">
    	Cufon.replace('h1');
    	</script>
    
  8. This will replace all <h1> tags with the Vegur font in this case.
  9. Now take a look at your <h1> tag text on your website and notice the new font.
Benefits
  • Use any font imaginable on your website.
  • Easy & fast to implement.
  • Solves the SEO problem listed above of using different fonts while still being Search Engine Friendly.
  • Exceptionally fast.
Caveats
  • Can’t apply a hover status to links, although links still work.
  • Can’t utilize some CSS code for the text such as text shadow.
  • It’s JavaScript, it must load, and could take a little more time to load your page, although this is the fastest solution available at the moment.
  • If the user of the website does not have JavaScript loaded, fonts will show up as dictated in CSS instead of your new fancy font.

Click here for further instructions such as utilizing multiple fonts on one page.

Erik Rostad

Author Erik Rostad

Erik Rostad started EPR Creations in May 2008. He works with universities, international organizations, and executives on their online presence.

More posts by Erik Rostad

Join the discussion 17 Comments

  • Plumber Richmond | Plumber Richmond says:

    […] SEO-Friendly Fonts | EPR Creations LLC […]

  • […] SEO-Friendly Fonts | EPR Creations LLC […]

  • Dan’s Motorcycles | EPR Creations LLC says:

    […] they would like to rent and submit a deposit for the rental.  Also, one of the first sites I used Cufon Font Replacement. No Responses to “Dan’s […]

  • Francis Banke says:

    I’m glad for this unique insightful stuff. More often than not, the greatest info originate from the sources a person would not expect. Up unitll now, I decided not to give a lot of thought to leaving comments on weblog articles and have left feedback even less. Reading your helpful content, will definately motivate me to do this again.

  • bad pool caller says:

    Well, the post is actually the greatest topic on this related issue. I fit in with your conclusions and will thirstily look forward to your coming updates. Saying thanks will not just be adequate, for the extraordinary lucidity in your writing. I will directly grab your rss feed to stay informed of any updates.

  • Firming Body Lotion says:

    I never know about SEO friendly fonts until i read about your article. cause i used to think SEO is only meta tag, H1 and etc

  • Indexer says:

    I’m using cufon at my own website and was just wondering whether it’s good for SEO because you can’t copy it when you hover over with your mouse so I thought the SERPs don’t read it. After reading your very informative post I’m now well informed. Thanks for the great info! Yours was the only article I could find that explains the pros and cons of cufon font.

  • Erik Rostad says:

    Hi Indexer – Yes, Cufon is good for SEO because even though a user can’t copy the text when they hover over it, if you look at the source code for the page, the text is there. The Search Engines read through that code, so if the text is there, it will be read. This contrasts with using an image of the same text where the search engines would not be able to read the text within the image. That is why Cufon is a great solution.

  • Kathman says:

    I wish every blog worked this hard to provide good content.

  • Darryl Krikwen says:

    Finally, I found the information I was looking for. I have been doing research on this subject, and for three days I keep finding sites that are supposed to have what I am looking for, only to be disappointed with the lack of what I wanted. I wish I could have located your website quicker! I had about 40% of what I needed and your web-site has that, and the rest of what I need to finish my research. Thank you and I will report back on how it goes!

  • baby games says:

    Is verdana font ok to use for seo? It looks little big compare to other fonts.

    • Erik Rostad says:

      Any font is ok to use for SEO. The only problem is when you insert text as an image. Google cannot read the text in an image. You can adjust the size of any font in the style sheets.

  • Putri Arisnawati says:

    Oh… I know now, my step to using times new roman keep seo work

  • website script says:

    You understand thus considerably with regards to this topic, made me personally imagine it from numerous varied angles. Its like men and women are not interested until it’s something to accomplish with Woman gaga! Your personal stuffs great. Always handle it up!

  • youtube script says:

    It’s actually a nice and useful piece of info. I am glad that you just shared this helpful info with us. Please stay us up to date like this. Thanks for sharing.

  • 10 Font Facts: Why Typography is a Powerful Tool in Inbound Marketing? | Servula Blog says:

    […] popularity due to its speed, ease of use and its compatibility with most browsers. Here are some instructions to get you […]

Leave a Reply