{"id":287684,"date":"2019-05-14T07:20:20","date_gmt":"2019-05-14T14:20:20","guid":{"rendered":"http:\/\/css-tricks.com\/?p=287684"},"modified":"2019-05-17T14:32:30","modified_gmt":"2019-05-17T21:32:30","slug":"google-fonts-is-adding-font-display","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/google-fonts-is-adding-font-display\/","title":{"rendered":"Google Fonts is Adding font-display"},"content":{"rendered":"

Google announced at I\/O that their font service will now support the font-display<\/code><\/a> 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<\/a> and suggests that all @font-face<\/code> blocks ought to consider using the property<\/a>. <\/p>\n

Zach Leatherman has the lowdown:<\/p>\n

\n

This is big news\u2014it 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.<\/p>\n

It\u2019s also a bit of trailblazing, too. To my knowledge, this is the first web font host that\u2019s shipping support for this very important font-display feature.<\/p>\n<\/blockquote>\n

<\/p>\n

Yes, a big deal indeed! You may recall that font-display<\/code> instructs the browser how (and kinda when) to load fonts. That makes it a possible weapon to fight fight FOUT<\/abbr> and FOIT<\/abbr> issues<\/a>. Chris has mentioned how he likes the optional<\/code> value<\/a> for that exact reason.<\/p>\n

<\/code>@font-face {\r\n  font-family: \"Open Sans Regular\";\r\n  src: url(\"...\");\r\n  font-display: optional;\r\n}<\/pre>\n
Oh and this is a good time to remind everyone of Monica Dinculescu\u2019s font-display<\/code> demo<\/a> where she explores all the various font-display<\/code> values and how they work in practice. It\u2019s super nifty and worth checking out.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":223806,"featured_media":272639,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1547,817,1548],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/google-fonts.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":334948,"url":"https:\/\/css-tricks.com\/the-best-font-loading-strategies-and-how-to-execute-them\/","url_meta":{"origin":287684,"position":0},"title":"The Best Font Loading Strategies and How to Execute Them","date":"March 2, 2021","format":false,"excerpt":"Zach Leatherman wrote up a comprehensive list of font loading strategies that have been widely shared in the web development field. I took a look at this list before, but got so scared (and confused), that I decided not to do anything at all. I don't know how to begin\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/performance-waterfall-fonts.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311329,"url":"https:\/\/css-tricks.com\/the-fastest-google-fonts\/","url_meta":{"origin":287684,"position":1},"title":"The Fastest Google Fonts","date":"May 22, 2020","format":false,"excerpt":"When you use font-display: swap;, which Google Fonts does when you use the default &display=swap part of the URL , you're already saying, \"I'm cool with FOUT,\" which is another way of saying web text is displayed right away, and when the web font is ready, \"swap\" to it. There\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/google-fonts.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333512,"url":"https:\/\/css-tricks.com\/some-typography-blog-posts-ive-bookmarked-and-read-lately\/","url_meta":{"origin":287684,"position":2},"title":"Some Typography Blog Posts I’ve Bookmarked and Read Lately","date":"February 4, 2021","format":false,"excerpt":"Font-size: An Unexpectedly Complex CSS Property \u2014 From Manish Goregaokar in 2017. Of many oddities, I found the one where font: medium monospace renders at 13px where font: medium sans-serif renders at 16px particularly weird.The good line-height \u2014 Since CSS supports unitless line-height, you probably shouldn't be setting a hard\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/font-vector-points.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325635,"url":"https:\/\/css-tricks.com\/how-to-load-fonts-in-a-way-that-fights-fout-and-makes-lighthouse-happy\/","url_meta":{"origin":287684,"position":3},"title":"How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy","date":"November 24, 2020","format":false,"excerpt":"A web font workflow is simple, right? Choose a few nice-looking web-ready fonts, get the HTML or CSS code snippet, plop it in the project, and check if they display properly. People do this with Google Fonts a zillion times a day, dropping its  tag into the . Let\u2019s\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/google-lighthouse.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":244715,"url":"https:\/\/css-tricks.com\/font-display-masses\/","url_meta":{"origin":287684,"position":4},"title":"`font-display` for the Masses","date":"August 19, 2016","format":false,"excerpt":"Updated on January 12, 2017: Proper support checks are now part of the article body. Added information about the block value. Minor tweaks and copy edits. Enjoy! If you're a regular reader here at CSS-Tricks, chances are good you know a bit about web fonts. You may even know a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":306566,"url":"https:\/\/css-tricks.com\/dark-mode-and-variable-fonts\/","url_meta":{"origin":287684,"position":5},"title":"Dark mode and variable fonts","date":"April 23, 2020","format":false,"excerpt":"Not so long ago, we wrote about dark mode in CSS and I\u2019ve been thinking about how white text on a black background is pretty much always harder to read than black text on a white background. After thinking about this for a while, I realized that we can fix\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/dark-light-text-backgrounds.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/287684"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=287684"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/287684\/revisions"}],"predecessor-version":[{"id":288055,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/287684\/revisions\/288055"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/272639"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=287684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=287684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=287684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}