Web Font Optimisation (Variable Fonts, Subsetting, font-display)
Web font optimisation covers all the measures used to deliver embedded typefaces quickly, without layout shifts and at minimal file size. These include subsetting (reducing a font to the characters actually needed), variable fonts (one file for several styles instead of separate files per weight) and the CSS property font-display, which controls rendering behaviour while a font loads. Unoptimised web fonts can delay the Largest Contentful Paint when the LCP element is a block of text, and they cause layout shifts (CLS) when the fallback and target typefaces take up different amounts of space.
In practice
For websites with Latin character sets, a subset containing accented and special characters is usually enough – tools such as glyphhanger or the Google Fonts subsetting API reduce file sizes noticeably, most of all for typefaces with a very large character repertoire (CJK fonts, with more than 10,000 glyphs); for Latin styles, which typically hold 100 to 1,000 glyphs, the gain is considerably smaller. WOFF2 should be the default format, as it is around 30 per cent smaller than WOFF and supported by all relevant browsers. font-display: optional or swap are the most sensible choice for most websites, with optional avoiding layout shifts most reliably, while swap shows text immediately in the fallback typeface. Critical fonts should be prioritised with in the head and aligned to the target typeface using suitable fallback font metrics, in order to minimise CLS. Variable fonts are worthwhile above all when a website uses several styles (regular, medium, bold, italic) of the same family – with only one or two styles, classic static fonts are often leaner. Self-hosted fonts, rather than embedding from Google Fonts servers, also shorten DNS and connection time; and no visitor IP address is passed to a third-party provider in the process.