SEO-Friendly Fonts

Blog•on March 8th, 2010•11 Comments

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>
  7. This will replace all <h1> tags with the Vegur font in this case.
  8. 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.