Posted: February 16, 2012
For years, designers have complained of only being allowed to use Times New Roman, Arial, Verdana, or Courier as marketers and web developers forced the usage of web-friendly fonts for usability and search engine optimization. The idea of these four fonts being known as the web-friendly fonts is quickly becoming extinct.
In 2011, Google Fonts was officially released, moving from an experimental phase to becoming one of Google’s services, and designers finally discovered that they could go beyond the basic limitations of web-friendly fonts. In fact, not only could they go beyond but their marketing and web developer colleagues were also excited as Google Fonts also met their usability and SEO requirements while being simple to implement and opening up a new world of design possibilities. Plus, all the fonts are Open Source and can be used free of charge!
It sounds too good to be true but it is true. Let’s take a look.
A complete list of Google Fonts can be found at http://www.google.com/webfonts and the list can be filtered by four font tyles: serif, sans-serif, display, and handwriting. Designers can download the fonts to their computer for use in Photoshop or Illustrator by choosing the fonts, adding it to their Collection, and then clicking the Download Your Collection button.
Web Developers like Google Fonts because it’s as simple as adding just 2 lines of code to the website, one line in the <head> of the page and another in the CSS file referencing the font family being used. For example, if we were going to use the script (handwriting) font called Herr Von Muellerhoff, the following code would need to be added:
Between the <head></head> of your HTML document:
In the CSS Stylesheet (example: making all H2 headings into Herr Von Muellehoff):
h2 {
font-family: 'Herr Von Muellerhoff', arial, san-serif;
}
Actually, what the above does is it makes the H2 tags display using the Herr Von Muellerhoff font but if that isn’t available, it will use Arial, and if that’s not available, it will use a san-serif font. Of course, Arial and the sans-serif font look nothing like the script of Herr Von Muellerhoff!
To use mutliple Google Fonts on a page, you simply have to add another font to the <link> code in the <head> by separating the fonts using the pipe character (ie. vertical bar). For example, if we wanted to use the font Tangerine with our Herr Von Muellerhoff, we would need to use this line of HTML in between <head></head>
Simple but effective!
With so many fonts styles to choose from, the benefits of using Google Fonts for SEO should improve because developers can now turn custom headings with graphics into web-friendly fonts, all of which can be read by Google’s Spider. Before, tricky headings would have been converted into a graphic and the search engines would never have known there was text on that image.
The only negative side is the load time is increased slightly as the font has to be downloaded and displayed on your computer. However, this is usually a minor speed difference is Google’s serves are very fast and reliable. Obviously, the more fonts you use, the more intensive the load time, however most web designers only use a few fonts for the page,maybe 5 fonts but it’s rare to see more.
Using Google Fonts is a win-win situation for designers, marketers, and web developers as this service makes it easy to expand the number of web-friendly fonts to be used on your site. With Google funding the designing of new fonts, we should see a significant increase it options in the coming years.
Leave a Reply