Font Optimization

Definition

Techniques used to ensure custom web fonts do not severely impact website performance or cause aggressive layout shifts when they finally load.

Explain Like I'm New

Custom fonts (like Google Fonts) are heavy files. When a user visits your site, their browser uses a default font (like Arial), then 2 seconds later the custom font finishes downloading, and the entire text changes shape and size. This is called the 'Flash of Unstyled Text' (FOUT), and it causes the layout to jump around wildly.

Real World Example

Using `font-display: swap` to tell the browser: 'Use Arial instantly so the user can start reading. As soon as my custom font downloads, swap it in smoothly.'

Common Use Cases

•Improving Cumulative Layout Shift (CLS)
•Faster text rendering

Interactive Example

Interview Questions

basic

What CSS property dictates how a font is displayed while it is downloading?

intermediate

Why might you 'preload' a font?

Flash Cards

Question

What property?

Click to reveal answer

Answer

`font-display` (usually set to `swap`).

Question

Why preload?

Click to reveal answer

Answer

Fonts are usually discovered late in the rendering process (the browser has to download the HTML, then download the CSS, read the CSS, and ONLY THEN realize it needs to download a font). Adding `<link rel="preload" href="myfont.woff2" as="font">` in the HTML `<head>` tells the browser to start downloading the font instantly.