Google Fonts is Adding font-display


0

May 09, 2019

At Google I/O this week, Anna Migas shared a photo of an Addy Osmani and Katie Hempenius session that dropped a font loading bombshell on the world.

Google Fonts is adding support for font-display! 🎉🎉🎉🎉

<link href="https://fonts.googleapis.com/css?family=Lobster&font-display=swap" rel="stylesheet">

Want to learn more about font-display? Check out this font-display Playground demo on Glitch from Monica Dinculescu.

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. Yeah, the GitHub issue asking for this was filed in August of 2016 (just short of three years ago), but Google Fonts is still ahead of the game here.

Timeline

Date Behavior Vendor
2017 Jul 24 font-display Supported Chrome (v60) was first to implement.
2017 Aug 8 font-display Supported Opera (v47) was second to add support.
2018 Jan 22 font-display Supported Firefox (v58)
2018 Mar 28 font-display Supported Safari (v11.1)
2018 Dec 29 font-display Supported Samsung Internet (v8.2)
Announced
2019 May 8
font-display Pending Google Fonts
Not yet font-display Not supported Adobe Fonts
Not yet font-display Not supported Typography.com (by Hoefler&Co)
Not yet font-display Not supported fonts.com (by Monotype)

(Monotype tip via @thomasdeinhamer)

Want a full history of FOIT and FOUT?

Related

Future wishlist

Stable font file URL in Google Fonts so that we can embed the CSS in our sites directly. This would alleviate the two-hop penalty you’re paying to use these fonts (one render-blocking hop for the CSS and another to fetch the font files). Not only would this be fewer hops, but then you could use it with preload too, which would be incredible.

Font URLs are cached for a year and CSS URLs are cached for only a day—@googlefonts

This font-display change is great and means that things are improving! But self hosting will continue to be my preferred method for these typefaces until this issue is resolved.


Like it? Share with your friends!

0
admin

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format