Loading Fonts for Low Bandwidth

Webfonts form the foundation of your design, but what happens when they don’t load as expected? Unreliable data connections are still fairly commonplace. If webfonts don’t load, it’s possible to downgrade a page design gracefully, even imperceptibly which we hope to have done here. This page uses a webfont designed to fallback to Times New Roman. More about that below. You are currently:

Viewing Webfonts

Font-wise, the degraded experience from a spotty connection results in one of three scenarios, ranging from acceptable to bad:

1. FOUT (Flash Of Unstyled Text): a momentary flash of a default system font before the webfonts load.
2. The webfont never loading, resulting in the page set with a default system font.
3. The absence of any fonts. A blank page. It’s more common than you think. Don’t let this happen! Always load something.

Page designers have been using system fonts as fallbacks since the beginning of HTML. The practice came to be known as the “font stack” — an ordered wishlist of fonts which looks something like the following (also probably one of the most used lines of CSS code in the history of the Internet):

font-family: Helvetica, Arial, sans-serif;

Web design started out using only system fonts, so the fallback fonts in the stack were actually fallbacks for fallbacks. In our example above a Mac user would see Helvetica, PC users would see Arial, and everyone else would see Papyrus.

Fallback fonts need not be identical twins to work. The idea is to match for style as best you can, with increased compromise further down the stack. There are two visual points to consider when designing for fallbacks:

• Basic underlying letter structure
• Sizing and Metrics

The first is essential, the second is a nice to have. This page attempts to load Tinos, a typeface designed specifically to fallback to Times New Roman which is installed on most computers by default. Tinos has metrics identical to Times meaning the text setting remains without rewrapping lines while viewing in either font.

Basic letter structure

The fallback font should at least match the basic structure of the webfont, even if some details are different such as having serifs or not.

Sizing and Metrics

Not all type is the same physical size when set at the same pixel size. This is referred to as appearing size. One font set at 10px might appear as 12px in another font. Addressing this is helpful for reducing the effects of FOUT. It might not be a perfect match but close will help.

Of course, setting for the fallback font is more important than matching the setting of the webfont. More than you think will see your page in the fallback state. Ask yourself, should adjustments be made to improve the fallback setting? Is the body text readable? Does the title size still support the body type?