HTML and CSS Reference
a referenced font installed, the browser would fall back to one of a handful of gener-
ic defaults. Practically, this meant Arial, Times New Roman, and Courier New and a
few others were the only “safe” typeface choices. Elaborate hacks such as scalable In-
man Flash Replacement (sIFR) 11 emerged that replaced text on the page with Adobe
Flash content that could display embedded fonts. This effort has since been abandoned
in favor of the ability in modern web browsers to download fonts for use on a page. So-
called web fonts have seen a dramatic rise in availability thanks to the introduction of
the @font-face rule, part of the CSS Fonts Module Level 3. This rule allows a font
file to be linked into the style sheet for inclusion on the page.
11 sIFR information can be found here: http://novemberborn.net/sifr3 , however it is noted that the
project is no longer maintained.
Note Since the typeface definition file needs to be downloaded before it is displayed,
using web fonts potentially introduces what front-end developer Paul Irish termed
FOUT (Flash Of Unstyled Text), 12 whereby the text on the page flashes with its default
font before using the downloaded typeface. Some web browsers have attempted to ad-
dress this issue, so you may not run into it; however, if you do, there are scripts avail-
that aim to prevent FOUT in browsers where it still occurs.
Depending on the browser, fonts can be downloaded in a variety of formats
(TrueType, OpenType, and so on). A newer format that all modern web browsers sup-
port is Web Open Font Format (WOFF), which is a lightweight font format developed in
2009 specifically for fonts that will be distributed over the Web. The format is currently
undergoing standardization at the W3C. 13
Google hosts a library of web fonts at www.google.com/webfonts that can be
linked to remotely for inclusion in your website. Since its launch, this directory has
grown exponentially from a handful of fonts to hundreds. This is a good place to start
experimenting with web fonts.
The general idea behind downloading fonts is that the @font-face directive is
placed at the top of your CSS file and specifies the font family and font file source for