font-display is kinda like a walk in the park though. It’s just a single line of CSS. It doesn’t solve everything that Zach’s more exotic demos do, but it can go a long way with that one line. It’s notable to bring up right now, as support has improved a lot lately. It’s now in Firefox 58+, Chrome 60+, Safari 11.1+, iOS 11.3+, and Chrome on Android 64+. Pretty good.
What do you get from it? The ability to control FOUT and FOIT as is right for your project, two things that both kinda suck in regards to font loading. We’ve got a couple posts on it around here:
font-displayfor the Masses by Jeremy Wagner
- If you really dislike FOUT,
font-display: optionalmight be your jam by me
FOUT = Flash of Unstyled Text
FOIT = Flash of Invisible Text
Neither is great. In a perfect world, our custom fonts just show up immediately. But since that’s not a practical possibility, we pick based on our priorities.
The best resource out there about it is Monica Dinculescu’s explainer page:
i’d summarize those values choices like this:
- If you’re OK with FOUT, you’re probably best off with
font-display: swap;which will display a fallback font fairly fast, but swap in your custom font when it loads.
- If you’re OK with FOIT, you’re probably best off with
font-display: block;which is fairly similar to current browser behavior, where it shows nothing as it waits for the custom font, but will eventually fall back.
- If you only want the custom font to show at all if it’s there immediately,
font-display: optional;is what you want. It’ll still load in the background and be there next page load probably.
Those are some pretty decent options for a single line of CSS. But again, remember if you’re running a major text-heavy site with custom fonts, Zach’s guide can help you do more.
I’d almost go out on a limb and say: every
@font-face block out there should have a
font-display property. With the only caveat being you’re doing something exotic and for some reason want the browser default behavior.
Wanna hear something quite unfortunate? We already mentioned
font-display: block;. Wouldn’t you think it, uh, well, blocked the rendering of text until the custom font loads? It doesn’t. It’s still got a swap period. It would be the perfect thing for something like icon fonts where the icon (probably) has no meaning unless the custom font loads. Alas, there is no
font-display solution for that.
And, hey gosh, wouldn’t it be nice if Google Fonts allowed us to use it?
It seems that
I write simple PostCSS plugin to automatically add
font-display: swap;css rule.