Zach’s ugly mug (his face)

Zach Leatherman

Google Fonts is Adding font-display 🎉

May 09, 2019 #5 Popular 37,585 Views

May 15, 2019 renamed URL parameter to display. Thank you Mathias!

May 22, 2019 added note about display=swap in the default code embed.

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.

You will not have to self-host Google Fonts any more to get font-display: swap; 🙌 #io19 pic.twitter.com/SldOuoNInF

— Anna Migas @ Google I/O (@szynszyliszys) May 8, 2019

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

Update My 15, 2019: although the I/O preview used the font-display URL parameter, the final implementation uses display instead

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

Update May 22, 2019: Houssein Djirdeh also noticed that display=swap is now used by default when you copy and paste code from the Google Fonts site. This is a really big deal for visible text. Full credit to the Google Fonts team for this.

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 competition 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)

2019 May 15
font-display Supported 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?

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.

Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Previous
beyond tellerrand—Düsseldorf
Next
NebraskaJS Omaha

56 Retweets

Zach LeathermanYuriy MarkovAnnAnnTimothy MartinPinboard PopularIndieWeb Avatar for https://findcodesnippet.comIndieWeb Avatar for https://blog.oyewolet.comPinboard PopularOne.comThomas_BckYohan J. RodríguezSwiss UX/UI NewsPatrik IllyRefresh DetroitIndieWeb Avatar for https://all-markup-news.comIndieWeb Avatar for https://www.webcreatorbox.comMatt BiilmannB O L A J I ⚡️James Voss GrumishTomoyuki Kashirotams sokariJAMstack ChicagoihowerJacinto LajasHelge JohnsenDane RichazuMat MarquisFront-End FrontGary Stevens紫の上紫の上Jason BarkerAnimadioYunus Emre TatarJSer.infoLiss MayJonathan ShroyerDimitris GrammatikoArtsy CodeUnderlandStéphaneCSS WeeklyPaper LeafIndieWeb Avatar for https://nycjoseph.comSilvestar BistrovićIndieWeb Avatar for https://nycjoseph.comIndieWeb Avatar for https://melanie-richards.comIndieWeb Avatar for https://applab.websiteIndieWeb Avatar for https://extensive.designBryan D. WilhiteIndieWeb Avatar for https://www.reddit.comIndieWeb Avatar for https://terrywells.co.ukIndieWeb Avatar for https://terrywells.ioIndieWeb Avatar for https://horstschulte.com

58 Likes

Eric PortisChristopher KollarsTimothy MillerTyler StickaZoran GavricHoussein DjirdehDaniel EhnissJeremy WagnerPaul ShryockDaniel EhnissCed 💣Michael ScharnaglDave Rupertit's EricPeter MackoJeremy SwinnenJeremy WynnJRiccardo ErraStefan KriegerJAMstack ChicagoDavid HallPelle WessmanIngo Steinke 🇪🇺DimitrisMax KohlerchlesŠime VidasGabriel CuetoGregory CovfefeCody Petersonit-spirit SoftwareBrian Rinaldi✨ JoëlNicolas HoizeyJakejellePatrick KettnerThomas DeutschchrissyMike AparicioSven WolfermannSérgio SantosDavid Jonathan RossAJ KleinBilly BlinkenlightsRoberto DipMarc HaunschildJuan FernandesBart VandeputtePascal CAndreas SanderB O L A J I ⚡️Phil Hawksworth at #FrontendUnitedMatthias OttMichael BishopDave 🧱Matt Biilmann
8 Comments
  1. Webmention Rocks!

    Webmention Rocks!

    This test verifies that you accept a Webmention request that contains a valid source and target URL. To pass this test, your Webmention endpoint must return either HTTP 200, 201 or 202 along with the appropriate headers. If your endpoint returns HTTP 201, then it MUST als… Truncated

  2. Phil Hawksworth at #FrontendUnited

    @philhawksworth

    Yyyyyess!

  3. Max Böck

    @mxbck

    Glad it was helpful. Looking forward to see what you'll come up with!

  4. danfascia

    @danfascia

    @paulrobertlloyd totally did this before any of us on his @eleven_ty based personal blog github.com/paulrobertlloy…

  5. Zach Leatherman

    @zachleat

    Ha! Of course he did 🏆

  6. danfascia

    @danfascia

    His repo should be made the official reference for @eleven_ty I've learned more from browsing that than anywhere else... Docs included!

  7. Pelle Wessman

    @voxpelli

    Nice! And for a solution that works independently of static site generator one can use my webmention.herokuapp.com Love that more and more Webmentions finds its ways into static sites. Also intrigued by @eleven_ty, may perhaps switch from Jekyll to that on voxpelli.com

  8. Jeremy Swinnen

    @jereswinnen

    That’s definitely on my list as well. Building with Eleventy has been a blast so far!

Shamelessly plug your related post:

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)