Skip to content

Preload web fonts

Custom web fonts have been around on the web for a number of years, and became much more popular with the advent of services such as Typekit and Fontdeck.  In addition to these font services, there are a number of sites that allow downloading and hosting of custom fonts such as Font Squirrel and Google Web Fonts.

What they all have in common is that the fonts are all lazy loaded – which means that the fonts are only loaded and rendered when a CSS selector has a matching @font-face rule.  In order to download these fonts, the browser has to download and parse all HTML and CSS to search for any matching rules before applying the font changes.

This response is intentional, giving the advantage of only downloading font files as and when they’re needed and requires no superfluous connections initially. This approach represents poor performance as the amount of web fonts being used has increased significantly over the last few years.


© 2020 Graeme Pirie