Zach’s ugly mug (his face)

Zach Leatherman

Google Fonts is Adding font-display 🎉

May 09, 2019 #1 Popular

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

DateBehaviorVendor
2017 Jul 24font-display SupportedChrome (v60) was first to implement.
2017 Aug 8font-display SupportedOpera (v47) was second to add support.
2018 Jan 22font-display SupportedFirefox (v58)
2018 Mar 28font-display SupportedSafari (v11.1)
2018 Dec 29font-display SupportedSamsung Internet (v8.2)

2019 May 15
font-display SupportedGoogle Fonts
Not yetfont-display Not supportedAdobe Fonts
Not yetfont-display Not supportedTypography.com (by Hoefler&Co)
Not yetfont-display Not supportedfonts.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.

4 Retweets

Dimitris GrammatikoJAMstack ChicagoB O L A J I ⚡️Matt Biilmann

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 BlinkenlightsMarc HaunschildRoberto DipJuan FernandesBart VandeputtePascal CAndreas SanderB O L A J I ⚡️Phil Hawksworth at #FrontendUnitedMatthias OttMichael BishopDave 🧱Matt Biilmann
8 Replies
  1. Jeremy Swinnen

    Jeremy Swinnen @jereswinnen #

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

  2. Pelle Wessman

    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

  3. danfascia

    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!

  4. Zach Leatherman

    Zach Leatherman @zachleat #

    Ha! Of course he did 🏆

  5. danfascia

    danfascia @danfascia #

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

  6. Max Böck

    Max Böck @mxbck #

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

  7. Phil Hawksworth at #FrontendUnited

    Phil Hawksworth at #FrontendUnited @philhawksworth #

    Yyyyyess!

  8. 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 also return a Location header. If it returns HTTP 200 or 202, then it MUST NOT include a Location header.

    44 Mentions
    1. terrywells.io #

    2. NYC Joseph @https://nycjoseph.com/blog/author/joseph-ofallongmail-com/ #

      typOGraPHy Tips + foNt TOoLS &Amp; REsouRceS fOnt cOmBInatiOns LiBrARY viA: foNt coMBiNATIOnS lIbraRy ficturE — THE font IN usE arChiVe tHAt wILL inSPire yOU VIa: producT huNt A TERRiBlE TYPe foUnDrY VIa: eNFoNt teRRiblE tyPOGraPhY TermS CHEAt Sheet vIA: niELsen nORMAn gROUp pUblic SanS VIA: PubLiC-sAnS.DigitAL.gOv goOgLe foNtS makINg GoOgLE FONts FAsTEr⚡ – cliO + CALLIope – MEDIUm ViA: medIUm pAIR &amP; COmPAre: FOnT PAIRinG aNd COmpArIsOn TOOl (wITH google foNts) viA: PAIR &AMp; COmPaRE: foNT PaIriNG and COmPAring toOL | GoOgLe FoNTs PLaYGrOuNd gooGlE foNts Is addinG foNt-disPLaY viA: CsS-trickS

    3. Paper Leaf

      Paper Leaf @paper_leaf #

      Google Web Fonts now supports font-display without self-hosting – so you can have better control over web font loading behaviour: zachleat.com/web/google-fon…

    4. CSS Weekly

      CSS Weekly @CSSWeekly #

      Google Fonts recently added support for font-display—which means, as Zach Leatherman (@zachleat) explains, that we now have more control over Google Fonts web font loading behavior. bit.ly/2QFMLoa

    5. horstschulte.com #

    6. Stéphane

      Stéphane @TefDesign_fr #

      Google Fonts is adding font-display 🎉 zachleat.com/web/google-fon…

    7. Underland

      Underland @underlandxyz #

      Brilliant news for web developers! 🙌🎉 #fonts #webdesign #webdev zachleat.com/web/google-fon…

    8. Artsy Code

      Artsy Code @artsycode #

      Google Fonts added support for font-display (or rather 'display'). Devs now have more control over web font loading behavior. #webfonts zachleat.com/web/google-fon…

    9. Jonathan Shroyer

      Jonathan Shroyer @design_innovat #

      #Google #Fonts just added support for font-display. We can now have display=swap instead of blank text while loading! zachleat.com/web/google-fon… #css #html5

    10. Liss May

      Liss May @Lissett40153956 #

      Google Fonts is Adding font-display 🎉—zachleat.com #WebDesign zachleat.com/web/google-fon…

    11. JSer.info

      JSer.info @jser_info #

      "Google Fonts is Adding font-display :tada:—zachleat.com" realtime.jser.info/2019/05/21/goo… => zachleat.com/web/google-fon… Google Fontsがdisplayパラメータでfont-displayプロパティの指定をサポートしたことについて。 関連URL display=swapとはなにか - MOL

    12. Yunus Emre Tatar

      Yunus Emre Tatar @ynsmrttr #

      zachleat.com/web/google-fon…

    13. Animadio

      Animadio @animadio #

      Google Fonts is Adding font-display zachleat.com/web/google-fon…

    14. Jason Barker

      Jason Barker @JasonJBarker #

      Google Fonts is adding font-display zachleat.com/web/google-fon…

    15. 紫の上

      紫の上 @g_murasakinoue #

      Google Fontsがfont-displayプロパティの指定サポートしてくれたようです!やったね "Google Fonts is Adding font-display 🎉—zachleat.com" zachleat.com/web/google-fon…

    16. 紫の上

      紫の上 @g_murasakinoue #

      見てる: "Google Fonts is Adding font-display 🎉—zachleat.com" zachleat.com/web/google-fon…

    17. Gary Stevens

      Gary Stevens @GarySte22056486 #

      frontendfront: Google Fonts is Adding font-display zachleat.com/web/google-fon…

    18. Front-End Front

      Front-End Front @frontendfront #

      Google Fonts is Adding font-display zachleat.com/web/google-fon…

    19. Mat Marquis

      Mat Marquis @wilto #

      https://t.co/QO2gJE2XHo wil.to/_/interested.m…

    20. Google Fontsが`display`パラメータで`font-display`プロパティの指定をサポートしたことについて。 "Google Fonts is Adding font-display 🎉—z…" zachleat.com/web/google-fon…

    21. Dane Rich

      Dane Rich @Dane_Rich #

      @AdobeFonts Your turn next to support font-display css property? zachleat.com/web/google-fon…

    22. Helge Johnsen

      Helge Johnsen @sjsd #

      gooGle FOnt KOMmer nÅ MeD sTøTTE fOR disPLay-foNt css-TricKs.cOm/AlManaC/PRoper… Og zachLeAT.COM/wEB/GoOGle-fON…

    23. Jacinto Lajas

      Jacinto Lajas @jacintolajas #

      Google Fonts is Adding font-display 🎉—zachleat.com bit.ly/2WdP7jd via @zachleat

    24. ihower

      ihower @ihower #

      "Google Fonts is Adding font-display" zachleat.com/web/google-fon… # google fonts css 可以設定 font-display: swap 了,但注意參數是 display 而不是 font-display 喔。

    25. tams sokari

      tams sokari @tamssokari #

      Google Fonts is Adding font-display 🎉—zachleat.com zachleat.com/web/google-fon…

    26. Tomoyuki Kashiro

      Tomoyuki Kashiro @tomoyukikashiro #

      zachleat.com/web/google-fon…

    27. James Voss Grumish

      James Voss Grumish @JamesVG #

      Excited to add font-display to Google Fonts (zachleat.com/web/google-fon…) and coordinate with the team on backup font matching (meowni.ca/font-style-mat…).

    28. all-markup-news.com #

    29. www.webcreatorbox.com #

    30. Refresh Detroit

      Refresh Detroit @refreshdetroit #

      Google Fonts is Adding font-display zachleat.com/web/google-fon…

    31. Patrik Illy

      Patrik Illy @illycz #

      Google Fonts is Adding font-display 🎉—zachleat.com zachleat.com/web/google-fon…

    32. Swiss UX/UI News

      Swiss UX/UI News @SwissUXNews #

      Google Fonts is Adding font-display 🎉—zachleat.com #WebDesign zachleat.com/web/google-fon…

    33. Yohan J. Rodríguez

      Yohan J. Rodríguez @hasdid #

      #WebPlatform #Automated | Google Fonts Supports font-display zachleat.com/web/google-fon…

    34. Thomas_Bck

      Thomas_Bck @Thomas_Bck #

      Now @googlefonts add support for font-display ! zachleat.com/web/google-fon…

    35. One.com

      One.com @onecom #

      Google Fonts is adding support for font-display! zachleat.com/web/google-fon…

    36. Pinboard Popular

      Pinboard Popular @pinboard_pop #

      Google Fonts is Adding font-display 🎉—zachleat.com zachleat.com/web/google-fon…

    37. findcodesnippet.com #

    38. Pinboard Popular

      Pinboard Popular @PinPopular #

      Google Fonts is Adding font-display 🎉—zachleat.com zachleat.com/web/google-fon…

    39. Admin #

    40. Timothy Martin

      Timothy Martin @daydreamertim #

      Google Fonts is Adding font-display 🎉 zachleat.com/web/google-fon… #webdev #webdesign #ux #uxdesign #ui #uidesign #design #graphicdesign #logodesign #designer #freelancer #freelancing #typography #fonts #google #frontend #web #website #tech #technology

    41. Ann

      Ann @Aniuchaaja #

      GOOGLE FONTS IS ADDING FONT-DISPLAY zachleat.com/web/google-fon…

    42. Ann

      Ann @Aniuchaaja #

      GOOGLE FONTS IS ADDING FONT-DISPLAY zachleat.com/web/google-fon…

    43. Yuriy Markov

      Yuriy Markov @markov_yuriy #

      Google Fonts is Adding font-display 🎉—zachleat.com #WebDesign zachleat.com/web/google-fon…

    44. Zach Leatherman

      Zach Leatherman #

      blaH BLah BLah GoOgLe FONTs IS AddING FOnt-dISPLay