Understanding and Using Web Fonts: Part 3

In a previous blog post on fonts we discussed web font formats, now we’ll get into how to use them.

The font files themselves are included on the web server, so the CSS knows exactly where to retrieve it. Use the @font-face rule within your CSS stylesheet, name it using CSS’s standard font-family property, then reference it just as you would any other font throughout the rest of the CSS. It’s that simple!

How To Use Web Fonts

@font-face

The prebuilt CSS @font-face method for embedding fonts has become standard across all browsers. It is the most efficient, the easiest to implement, and now, the most compatible.

The image to the right shows us the basics of using the @font-face rule. Use the @font-face rule within your CSS stylesheet, name it using CSS’s standard font-family property, give it a source url (the location of the font file on the server), and reference it just as you would any other font throughout the rest of the CSS. In the example above, we set the font to the H2 tags. Be sure to still set up a proper font stack with standard web-safe fonts behind it.

The image above shows us the solutions for different browsers. The first statement is for IE9 in IE7 & IE8 render modes. The second statement is followed by a question mark to trick IE and load just the EOT file. The other browsers follow the spec and select the format they need based on the src cascade and the format hint.

A Few Other Methods

SIFR

SIFR uses a flash object to render to the font face, and then Javascript to identify the DOM and replace the text as specified.

Pros of SIFR

  • Text can be selected
  • Easily add shadows, anti-aliasing, and other text effects in Flash

Cons of SIFR

  • Slightly slower load times
  • Requires both JavaScript and Flash to be enabled

Cufon

Cufon uses the browser to draw vector objects using VML (Vector Markup Language) for Internet Explorer and the HTML 5 Canvas element for the more advanced browsers.

Pros of Cufon

  • Faster load times than SIFR and FLIR, since it is all JS
  • Has all strengths of Typeface.js with fewer weaknesses

Cons of Cufon

  • Text cannot be selected
  • Can’t apply hover state to converted text

Image Replacement

Image replacement has been used to create unique headlines and titles. The image is set as a background image and the HTML text is hidden using CSS. This method is mainly used for logos in the header of a web page.

Pros

  • Identical across browsers

Cons

  • Have to generate new images for updates
  • Not as SEO friendly
  • No ability to copy and paste
  • More download time

These methods are considered obsolete compared to the @font-face rule.

Web Font Embedding Services

Google Fonts

The Google Fonts API is probably one of the easiest services to get started with, mostly because there is no sign-up process. Browse the fonts they offer, select one, and then get the code. The service is very fast, with only a barely noticeable lag before loading the proper font. The fact that there are no limits on usage of the service puts it among the top contenders on this list. The only major drawback is the limited number of fonts available (60 including international fonts).

Free Commercial-Use Fonts: Font Squirrel

Font Squirrel is a web service that includes and organizes the best free for commercial use fonts available for download. The Font Squirrel’s @font-face generator automatically renders the fonts for the best performance among many platforms, and provides the adequate font formats for the best cross-browser compatibility and performance.

There are also several other services, some with fees, that provide more variety, or the ability to purchase licensing for premium fonts to use with @font-face: Fontspring, Typekit, Typefront.

Test, Test, Test!

Using web fonts requires thorough testing on as many different browsers and platforms as possible. If the screen display is low quality and lacks subpixel rendering, then serve system fonts to older browsers and OS. Conditional comments are the easiest way to exclude older browsers and operating systems from style sheets with Web fonts.

TAGS:
« Prev Article
Next Article »