Critical Web Fonts

Zach Leatherman outlines a new method for loading webfonts whereby the process can be broken up into two stages:

…instead of a full Roman webfont in the first stage, it loads a small subset of the Roman webfont, in this case with only the uppercase and lowercase alphabetic characters.

Then, in the second stage, we can load all the extra parts of that font, such as numbers or special characters. Ultimately, this greatly decreases the time in which readers will see the switch between the fallback font and the fancy web font: the first stage is only 9kb in size, which then gets replaced with a complete 25kb version.

The difficulty here being that a lot of type foundries don’t provide developers with the option to subset a font file.

Direct Link to ArticlePermalink


Critical Web Fonts is a post from CSS-Tricks

CSS-Tricks

Add a Comment

Your email address will not be published. Required fields are marked *

21