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 font-display for the Masses by Jeremy Wagner
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?
The post Hey hey `font-display` appeared first on CSS-Tricks.