Want More Choices? Use Font Linking

  • Posted on: 16 May 2011
  • By: admin

If you find your choice of web-safe fonts to be too limiting or if you want to use a more decorative font for a headline, your choices used to be very limited. One approach was to set your text in Photoshop and save it as an JPEG, but then search engines could not index your content, and screen readers couldn’t read your pages to disabled web users. In addition, every time you wanted to edit your text, you had to make a visit to Photoshop to recreate your image.

Fortunately, in 2009, the major browsers started supporting the @font-face specification in CSS3 (Cascading Style Sheets, see Time to Style Your Document with CSS) that provides significantly more flexibility for website designers in terms of font choices. The @font-face rule provides a mechanism for linking a font file that is stored on a server to the content in a webpage. The browser downloads the font file and uses it to set text in that typeface.  Joshua Johnson’s The Essential Guide to @font-face (2010) provides an excellent summary of current @font-face solutions for those who are coding their own websites. In his review, Joshua mentions sites such as TypeKit and FontSquirrel, which provide both free and paid font solutions.

Joshua also mentions the Google web font service which has expanded considerably since the article was published. TypeKit partnered with Google to develop a simple open process for using CSS font-linking, and in 2010 Google began their Google Web Fonts font sharing service. (You can read more about this service at the Google Web Font Blog.) As of July of 2011, the Google webfonts site offers 184 open source font families for use on your webpages (as of January, 2012, there were 422). These fonts include many decorative typefaces that are well suited for use in headlines.

Examples of Google Webfonts.

Figure 19. Examples of typefaces from Google’s free webfont service.

The Google/Typekit solution is straightforward and easy to use. The fonts are stored on Google servers. You link to a Google style sheet for the typeface you want to use (Google even supplies the linking code), and then you add the font to your CSS rules (Google includes sample rules as well). As an extra bonus, all the fonts are licensed to be used for free on the web.

Blogger now offers the Google webfonts as choices in its WSIWYG text editor; we suspect many other platforms will follow.