For our Chrome tests, how commonly is font-display used?īar chart showing the usage of the font-display style. ![]() Internet Explorer and pre-Chromium Edge don’t have support but they also render fallback text by default when a web font loads (no FOITs allowed here). Adding font-display: swap to your block is an easy way to tell the browser to show fallback text while the web font is loading.īrowser support is great too. The number one tool we have to fight the default web font loading behavior of “invisible while loading” (also known as FOIT), is font-display. Importantly, this particular data doesn’t really support or detract from the case to go WOFF2-only yet, but it remains a tempting idea. Unsurprisingly, WOFF2 dominates the results here for that reason, as browser support for WOFF2 has been pretty broad for some time now. Google Fonts does some sniffing methods to serve a streamlined CSS file and only includes the most modern format(). But this is misleading of course, per our earlier discussion on the dominance of Google Fonts in the data set. This dataset seems to suggest that the majority of people are already using WOFF2-only in their blocks. TypeKit was a distant single-digit second place, with the Bootstrap library accounting for an even more distant third place.įigure 6.9. ![]() It was unsurprising in that I expected the service to be the most popular and surprising in the sheer dominance of its popularity. The dominance of Google Fonts here was simultaneously surprising and unsurprising at the same time. ![]() Top 20 font hosts by percent of requests. What are the most popular third-party hosts?įigure 6.2. Google Fonts generates unique URLs for their font files which are subject to change. Note that while preload would be a nice addition to load the font files higher in the request waterfall (remember that preconnect sets up the connection, it doesn’t request the file content), preload is not yet available with Google Fonts. The model of requiring two separate hops to two different domains makes preconnect a great option here for the second request that will not be discovered until the CSS is downloaded. However, the font files are hosted on yet another domain. While these stylesheets are render blocking, they are very small. Developers add requests to these stylesheets using tags in their markup. Google serves fonts using third-party CSS files hosted on. The fact that three quarters are hosted is perhaps unsurprising given Google Fonts dominance that we will discuss below. 75% of mobile web pages use third-party hosts and 25% self-host. This is especially important for fonts used by very visually prominent content or body copy occupying the majority of a page.īar chart showing the popularity of third-party and self-hosting strategies for web fonts. Recommendations to mitigate the performance costs of loading web fonts from another host include using the preconnect, dns-prefetch, and preload resource hints, but high priority web fonts should be same-host requests to minimize the performance impact of web fonts. Same-host requests have the huge benefit of a better potential for prioritization against other same-host requests in the waterfall. Are fonts being hosted on the same host or by a different host?ĭifferentiating self-hosting against third-party hosting is increasingly relevant in an HTTP/2 world, where the performance gap between a same-host and different-host connection can be wider. Given that web fonts by default make text invisible while the web font is loading (also known as the Flash of Invisible Text, or FOIT), the performance of web fonts can be more critical than non-blocking assets like images. Using hosted web fonts enables ease of implementation and maintenance, but self-hosting offers the best performance. There is a whole chapter dedicated to performance but we will delve a little into font-specific performance issues here. ![]() The first and most prominent question: performance. However, for all the good they can do, web fonts can also do great harm to your site’s performance if they are not loaded properly.Īre they a net positive for the web? Do they provide more benefit than harm? Are the web standards cowpaths sufficiently paved to encourage web font loading best practices by default? And if not, what needs to change? Let’s take a data-driven peek at whether or not we can answer those questions by inspecting how web fonts are used on the web today. Using web fonts not only empowers design, but it democratizes a subset of design, as it allows easier access to those who might not have particularly strong design skills. Web fonts enable beautiful and functional typography on the web.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |