Google Fonts is Adding font-display
Robin Rendle May 14, 2019
Google announced at I/O that their font service will now support the
font-display property which resolves a number of web performance issues. If you're hearing cries of joy, that's probably Chris as he punches the air in celebration. He's wanted this feature for some time and suggests that all
@font-face blocks ought to consider using the property.
Zach Leatherman has the lowdown:
This is big news—it means developers now have more control over Google Fonts web font loading behavior. We can enforce instant rendering of fallback text (when using font-display: swap) rather than relying on the browser default behavior of invisible text for up to 3 seconds while the web font request is in-flight.
It’s also a bit of trailblazing, too. To my knowledge, this is the first web font host that’s shipping support for this very important font-display feature.
Yes, a big deal indeed! You may recall that
font-display instructs the browser how (and kinda when) to load fonts. That makes it a possible weapon to fight fight FOUT and FOIT issues. Chris has mentioned how he likes the
optional value for that exact reason.
font-family: "Open Sans Regular";
Oh and this is a good time to remind everyone of Monica Dinculescu’s
font-display demo where she explores all the various
font-display values and how they work in practice. It’s super nifty and worth checking out.
Direct Link to Article — Permalink
The post Google Fonts is Adding font-display appeared first on CSS-Tricks.