What are Web Fonts?

System fonts and browser safe fonts load without external font requests, making them the fastest options. Robinson says branding, design, and consistency lead many sites to use web fonts, citing an estimate that 82% of web pages do so.

Robinson recommends self-hosting fonts when performance is the priority. He explains that browser cache partitioning removed much of the cross-site caching benefit that once made Google Fonts attractive. For self-hosted files, he demonstrates a one-year immutable Cache-Control header.

With a simulated Fast 3G connection, Robinson shows how font loading can cause a flash of unstyled text or invisible text. He recommends `font-display: optional`, which has a short block period of about 100 milliseconds, and preloading fonts so the browser discovers them sooner. He pairs this with a system font stack, placing Inter first to make the fallback look more similar.

Variable fonts can combine weights and styles in one file, reducing network requests, while subsetting removes unused characters and languages. In his example, individual font files are about 290 KB each, a variable file is 748 KB, and a Latin subset WOFF2 file is 37 KB.

Robinson's four recommendations are to use a variable font, preload it, self-host it, and set `font-display: optional` to help prevent layout shift. He also points to a proposed CSS feature for font metric overrides that could reduce layout shift when fonts change.