SEO-Friendly Fonts
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
- Locate a font of your choice at Font Squirrel. Font Squirrel offers an array of fonts that are 100% free for commercial use.
- Download this font. It’s in a zip file and the actual font will be in an .otf or .ttf format.
- 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.
- Use the font file generator to transmit your font of choice into a JavaScript file.
- Upload this generated JavaScript file to the root level of your website.
- Place this code within the <Head> section of your website:
- This will replace all <h1> tags with the Vegur font in this case.
- Now take a look at your <h1> tag text on your website and notice the new font.
<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>
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.
Related posts:
[...] SEO-Friendly Fonts | EPR Creations LLC [...]
[...] SEO-Friendly Fonts | EPR Creations LLC [...]
[...] SEO-Friendly Fonts | EPR Creations LLC [...]
[...] 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 [...]
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.
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.
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
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.
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.
I wish every blog worked this hard to provide good content.
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!