What font-display technique is best for us?

[peterbe]

We're currently using font-display:swap (It's by default when using typeface-zilla-slab)

It means it renders the default OS font (or whatever we configure as number 2 in font-family) until the webfont loads. If the webfont comes in after 1s the headers will flash as they change style.

An attractive alternative might be to try fallback or optional as it'll display nothing for the first 100ms which hopefully avoids the flash of unstyled text.

This site explains the differences: https://font-display.glitch.me/

Note, we're using web fonts of headlines only. Which might be an important factor as evaluate this.

[peterbe]

font-display: swap is the right thing to do for headers. They look prettier that way and if the load very slow (e.g. 1,000ms) when the browser swaps out the system font for the pretty webfont, it won't cause reflow and jumping in the text that the user has hopefully started digesting.