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.
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.
- 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.
- 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.
- 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.
- 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.
Click here for further instructions such as utilizing multiple fonts on one page.