my favorite<\/a> as well. <\/p>\n","protected":false},"excerpt":{"rendered":"Senthil Padmanabhan documents how: Both FOUT and FOIT are undesirable. The best solution to that is font-display. Since font-display isn’t well supported, the path to get there is very complicated. They open sourced it. They went with replicating font-display: optional, my favorite as well.<\/p>\n","protected":false},"author":3,"featured_media":0,"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":false,"jetpack_social_options":[]},"categories":[17],"tags":[817],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":331882,"url":"https:\/\/css-tricks.com\/a-font-display-setting-for-slow-connections\/","url_meta":{"origin":260831,"position":0},"title":"A font-display setting for slow connections","date":"December 31, 2020","format":false,"excerpt":"Me, I really dislike FOUT. I like that it's an option, because not displaying text quickly on the web is no good. I know font-display: swap; is popular because it's good for performance, but that FOUT stuff pains me. Matt Hobbs: If there\u2019s one thing I\u2019d like readers to take\u2026","rel":"","context":"In "Link"","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":287684,"url":"https:\/\/css-tricks.com\/google-fonts-is-adding-font-display\/","url_meta":{"origin":260831,"position":1},"title":"Google Fonts is Adding font-display","date":"May 14, 2019","format":false,"excerpt":"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\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":268731,"url":"https:\/\/css-tricks.com\/hey-hey-font-display\/","url_meta":{"origin":260831,"position":2},"title":"Hey hey `font-display`","date":"April 17, 2018","format":false,"excerpt":"Y'all know about font-display? It's pretty great. It's a CSS property that you can use within @font-face blocks to control how, visually, that font loads. Font loading is really pretty damn complicated. Here's a guide from Zach Leatherman to prove it, which includes over 10 font loading strategies, including strategies\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":257337,"url":"https:\/\/css-tricks.com\/really-dislike-fout-font-display-optional-might-jam\/","url_meta":{"origin":260831,"position":3},"title":"If you really dislike FOUT, `font-display: optional` might be your jam","date":"August 3, 2017","format":false,"excerpt":"The story of FOUT is so fascinating. Browsers used to do it: show a \"fallback\" font while a custom font loads, then flop out the text once it has. The industry kinda hated it, because it felt jerky and could cause re-layout. So browsers changed and started hiding text until\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":244715,"url":"https:\/\/css-tricks.com\/font-display-masses\/","url_meta":{"origin":260831,"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":279900,"url":"https:\/\/css-tricks.com\/google-fonts-and-font-display\/","url_meta":{"origin":260831,"position":5},"title":"Google Fonts and font-display","date":"December 19, 2018","format":false,"excerpt":"Hey! This whole article is about a time before May 2019 in which Google Fonts didn't offer a way to use font-display without self-hosting the fonts. To use font-display with Google Fonts, you include a URL parameter like &display=swap in the URL, like https:\/\/fonts.googleapis.com\/css?family=Open+Sans&display=swap. If you're copying code from Google\u2026","rel":"","context":"In "Article"","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":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/260831"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=260831"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/260831\/revisions"}],"predecessor-version":[{"id":260832,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/260831\/revisions\/260832"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=260831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=260831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=260831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}