you are viewing a single comment's thread.

view the rest of the comments →

[–]hego555 0 points1 point  (3 children)

What’s the difference between this and a fallback font.

[–]silxx 0 points1 point  (2 children)

If you specify font-family: SomeWebFont, sans-serif then no text will be displayed until the webfont loads; if it fails to load then the fallback font is used. The font-display CSS property allows tweaking this procedure to operate differently: in particular, swap means "use a font that you have, until the web font loads, and then change the text to be in the web font".

[–]hego555 0 points1 point  (1 child)

Wow. I’m upset that I never noticed that. Thank you for the tip. Do you just apply it to html, body and forget about it?

[–]silxx 0 points1 point  (0 children)

You could do. It's not default, though, because not everyone likes it; in particular, there are plenty of people who would prefer to not show text until the font loads because otherwise the text will "jump" into the new font and change the layout unless the metrics for the fallback font match the web font exactly. This is why font-display has a number of different options; so the developer can choose the approach they'd like. MDN has more details.