Critical Web Fonts

Avatar of Robin Rendle
Robin Rendle on

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 →