One of the major concerns with loading web fonts using the rule is the increased load time. With the increased load time, the text to which the font has been applied takes longer than usual to appear on the page — that’s not good for the User Experience. @font-face We don’t want our users to wait for the content considering the fact that is already available but just isn't visible to their eyes. The modern browsers come with a mechanism called or “ ”. Chrome and Firefox render invisible text for 3-seconds, if the font is still not available, they use system font as a fallback and swap once the web font is ready. The problem is more severe in Microsoft Edge and Safari browsers, the former uses a system font as a fallback and the latter waits until the font is ready with no fallback as an option. With that, the time required for the takes a toll. “Flash of Invisible Text” FOIT First Contentful Paint This can be very useful for demographics with slower internet connections, especially on mobile devices. Below is a demo page with FOIT in action as observed in the second frame where the text is completely invisible. Also, notice the metrics. It takes 1.7s to achieve the First Contentful Paint. The metrics and the impact of FOIT can be severe on a complex webpage or an application. Thankfully, there is a very simple fix to overcome this issue. And it can be achieved by just adding a few lines of code to your CSS. We now apply a technique called “ or simply, “FOUT” to mitigate this issue. This allows us to display the text the moment it is ready in the DOM with a system-native font as a fallback before the custom font is loaded. Flash of Unformatted Text” Unformatted text (left). Text using the custom font (Right). to the rescue! 🎉 font-display Adding to your @font-face rule will tell the browser to use the fallback font provided in the font-family property until the custom font is available and applied to the text. In the below example, the “sans-serif” is used as a fallback until the “WildCoorg” custom font is available. font-display: swap; <a href="https://medium.com/media/5671b33461781649724f867f6f6de08d/href">https://medium.com/media/5671b33461781649724f867f6f6de08d/href</a> This significantly improves the overall load time with an almost 100% reduction in First Contentful Paint and First Meaningful Paint as well. As observed in the below Lighthouse report, you can notice that the text is already visible to the user in the second frame, unlike FOIT. The font-display property currently has full support by major browsers excluding Internet Explorer and Edge. Hopefully, it should soon be supported on all browsers. Until then, we can leverage this to improve the UX for users with modern web browsers. This can be very useful for demographics with slower internet connections, especially on mobile devices. The sooner the content is visible to the user, better the user experience. Additionally, the lighthouse reports yield you a better performance rating for your site. If you like the post, share it with your team and friends. I’m on Twitter. Find the complete list of my articles . @Gigacore over here

Microsoft

Twitter

Speeding up First Contentful Paint while loading web fonts using @font-face

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Developer’s Guide to Being a Better Leader — Cultivate a Sense of Hope

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Developer’s Guide to Being a Better Leader — Cultivate a Sense of Hope

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps