Engineering-Best-Practices Typography

We should outline best practices for web fonts.

When and how to wire up self-hosted fonts.
How to best wire up font stacks.
How to manage page weight, async loading, fallbacks.

I’ll chime in with my own opinions as time permits, but I’m more interested in knowing how others approach this. I think it could be very valuable for everyone as web fonts are quite common.

Aug 31 '15 16:08 jonathantneal

@allenmoore would love to see your thoughts here.

Aug 31 '15 16:08 tddewey

Self-hosting fonts is the most performant option. This prevents multiple roundtrips from server to CDN, especially in the case where the font being used has multiple weights and styles. However, the font's license must allow this option. For self-hosting, the traditional @font-face call is the preferred method. I provide .eot, .woff2, .woff, .ttf, and .svg formats. This covers all major browsers and provides legacy browser support.

Async loading is a bit tricky, as it can produce a FOUT. The accepted methods for async font loading waits for the font resources to become available, and then loads them. Until the font becomes available, a alternative font is rendered. These can be an undesirable behavior.

To manage page weight, utilizing local fonts, plus inlining the @font-face rules, can reduce the need to parse a CSS file. With this method, the inlined styles would need to be called before the primary site stylesheet to prevent FOUT. Also, this method is not render blocking.

Sep 01 '15 12:09 allenmoore

I dealt with this recently on a site - the client brought up that the pages were showing a FOIT (details on that here: https://www.filamentgroup.com/lab/font-loading.html ). For them, the brief FOUT was preferable to the FOIT, and when the async loading was done in the head, the FOUT was minimal.

Sep 02 '15 01:09 zrothauser

Use woff and woff2 fonts.

@font-face {
    font-family: "SomeFont";
    font-style: normal;
    font-weight: normal;
    src: url(path/to/font.woff2) format("woff2"), url(path/to/font.woff) format("woff");
}

Woff fonts are well supported in the last 3 versions of all major browsers, including Android and Internet Explorer. If you must user older formats, such as eot and ttf, be aware of adverse side effects.

Woff fonts use zlib compression that typically reduce font size by more than 40% from their counterparts. Using older formats means older browsers with (typically) slower internet connections will also require downloading larger assets. The situation is made more difficult by FOIT (the Flash of Invisible Text). Safari and Chrome refrain from showing text that uses a web font until that font has finished loading, and Internet Explorer will not show anything until the font has loaded. It is in the interests of these older browsers that they either do not use web fonts or that the fonts are loaded asynchronously.

If support for older Internet Explorer is required, an EOT file is required and the markup will be slightly different.

@font-face {
    font-family: "SomeFont";
    font-style: normal;
    font-weight: 400;
    src: url(path/to/font.eot?) format("eot"), url(path/to/font.woff2) format("woff2"), url(path/to/font.woff) format("woff");
}

Remember, when supporting Internet Explorer 8:

Do not use base64 encoded fonts. Old IE can not read them.
The EOT font must come first in source order with a question mark ? at the end of its URL to prevent IE from attempting to load and choke on the newer formats.
Use the invalid format("eot") to prevent newer IE from using the larger, legacy font.
Use a unique naming strategy when more than 2 weights are used, as IE only supports 4 variations per font family name.

Subset your fonts to reduce web font size significantly. Subsetting a font is the process of deleting non-essential characters resulting in a smaller file size and speedier delivery. Keep only the characters that would ever be used in the language of the site, which is typically the latin set.

Subsetting can be done with:

https://github.com/briangonzalez/fontprep https://fontie.flowyapps.com/home http://www.fontsquirrel.com/tools/webfont-generator

If possible, add hinting to your fonts too improve their overall readability.

Hinting can be added with:

https://fontie.flowyapps.com/home http://www.smashingmagazine.com/2012/04/a-closer-look-at-font-rendering/

Sep 02 '15 02:09 jonathantneal

I came across this issue with using SVG fonts, which have been deprecated by most browsers. Not sure if we should explicitly mention this, or just let SVG fonts die quietly.