Improve Web Font loading experience | Instructions with Screenshot
Webfonts are great. Without them we may be limited to roughly 12 cross-browser-safe-for-use fonts including Papyrus and Comic Sans #CreativeFelony
Leveraging Web Services like Google Fonts to display beautiful typography comes with a price. You’ve likely seen it — Page loads… images, but no text… 3 seconds or so pass and bomb — glitch bang fire you witness text appearing, then transforming like something out of Starman (1984 #AllHailJeffBridges).
The more font families and even font family styles being called into service, expand the render blocking/page loading… And no-one likes to wait or experience oddities like the above mentioned transformation.
Good news is happening, Google Fonts is first to add hosted font-swap capabilities to help improve the experience with:
&display=swap
This allows the text to display in the fallback font most similar to the WEB FONT. No more blank boxes where text should be or strange lines littering the page.
- Read more about the new feature | https://www.zachleat.com/web/google-fonts-display/
- Learn how the font-display changes the game | https://font-display.glitch.me/
If you found this helpful, like > follow > share > comment.
CR Rollyson is a Digital User Experience & Web Manager for a S&P 500 Fintech company and is the COO of Side Role, a marketing team in Charlotte North Carolina partnering with In-house Teams & Agencies, Non-profits, and Start-Ups. Learn more about Side Role here.
