How to avoid layout shifts caused by web fonts

The suggestion I like the most is <i>3.4) Use system fonts</i>:<p><pre><code> body { font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Roboto&quot;, &quot;Oxygen&quot;, &quot;Ubuntu&quot;, &quot;Cantarell&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; } </code></pre> Stack Overflow took this approach last year with the following font stack: [1]<p><pre><code> @ff-sans: system-ui, -apple-system, BlinkMacSystemFont, &#x2F;&#x2F; San Francisco on macOS and iOS &quot;Segoe UI&quot;, &#x2F;&#x2F; Windows &quot;Ubuntu&quot;, &#x2F;&#x2F; Ubuntu &quot;Roboto&quot;, &quot;Noto Sans&quot;, &quot;Droid Sans&quot;, &#x2F;&#x2F; Chrome OS and Android with fallbacks sans-serif; &#x2F;&#x2F; The final fallback for rendering in sans-serif. @ff-serif: Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; @ff-mono: ui-monospace, &#x2F;&#x2F; San Francisco Mono on macOS and iOS &quot;Cascadia Mono&quot;, &quot;Segoe UI Mono&quot;, &#x2F;&#x2F; Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas &quot;Ubuntu Mono&quot;, &#x2F;&#x2F; Ubuntu &quot;Roboto Mono&quot;, &#x2F;&#x2F; Chrome OS and Android Menlo, Monaco, Consolas, &#x2F;&#x2F; A few sensible system font choices monospace; &#x2F;&#x2F; The final fallback for rendering in monospace. </code></pre> [1]: <a href="https:&#x2F;&#x2F;meta.stackexchange.com&#x2F;questions&#x2F;364048&#x2F;we-are-switching-to-system-fonts-on-may-10-2021" rel="nofollow">https:&#x2F;&#x2F;meta.stackexchange.com&#x2F;questions&#x2F;364048&#x2F;we-are-switc...</a>

I just disable webfonts by default myself. I wonder how common that is. I never felt that I missed anything, because let&#x27;s face it: in 99% of the cases you jump on a website through search and leave it within 60 seconds.<p>I make exceptions for websites that I visit regularly, where the most frequent breakage is a custom font that packs icons. On websites that I frequently read for documentation I sometimes even swap the font to something that I prefer (by injecting a @font-face src:local rule).<p>Designer&#x27;s choice of fonts are frequently lower in legibility and&#x2F;or do not have good hinting (not at the same level of most system fonts). On non-retina displays the qualitative difference is sometimes staggering.

He forgot one: inline the font data (evil cackle).<p>This made sense for me in conjunction with subsetting for a stopwatch app that only needs 10 digits and a colon.<p>I submit it&#x27;s not so bad if you inline it with the rest of your styling, at least that&#x27;s cacheable separate from the content.

You can use a library to take care a lot of FOUT versus FOIT experience. Face Observer (<a href="https:&#x2F;&#x2F;fontfaceobserver.com" rel="nofollow">https:&#x2F;&#x2F;fontfaceobserver.com</a>) lets you wait for the web fonts to load, then responds accordingly.<p><pre><code> var html = document.documentElement; var script = document.createElement(&quot;script&quot;); script.src = &quot;fontfaceobserver.js&quot;; script.async = true; script.onload = function () { var roboto = new FontFaceObserver(&quot;Roboto&quot;); var sansita = new FontFaceObserver(&quot;Sansita&quot;); var timeout = 2000; Promise.all([ roboto.load(null, timeout), sansita.load(null, timeout) ]).then(function () { html.classList.add(&quot;fonts-loaded&quot;); }).catch(function (e) { html.classList.add(&quot;fonts-failed&quot;); }); }; document.head.appendChild(script);</code></pre>

&gt; Downloading one or two font files to render text won’t have a massive impact on speed, downloading five or ten font files will!<p>I wonder why we almost never talk about the actual filesizes of different fonts and which ones take less space, for when the total size of our webpages is important and we&#x27;d like to make our font choices with that in mind, provided that we don&#x27;t want to just use the system fonts for whatever reason.<p>For example, i described some of the specifics of serving my own fonts on my site instead of using Google Fonts in a discussion about privacy some time back: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=29996364" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=29996364</a><p>The question that i posed in that comment still hasn&#x27;t really been answered and is still relevant in my eyes:<p>&gt; While we&#x27;re on the topic of fonts, it&#x27;s a shame that we don&#x27;t think more about how heavy the fonts we choose to use are, since right now serving my own fonts eats up around half of the bandwidth on my non-image-heavy site. The single article that i&#x27;ve found on the topic so far as been this, &quot;Smallest (file size) Google Web Fonts&quot;: <a href="http:&#x2F;&#x2F;www.oxfordshireweb.com&#x2F;smallest-file-size-google-web-fonts&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.oxfordshireweb.com&#x2F;smallest-file-size-google-web-...</a><p>Why doesn&#x27;t Google Fonts have a field somewhere that&#x27;d show the total size of a font in any number of supported file formats? Why do we have so much effort towards optimizing the sizes of images, and yet fonts don&#x27;t get the same love?

&gt; <i>Preloaded fonts delay main JS bundle</i><p>Am I crazy or does that waterfall pretty clearly show nothing of the sort? When using http&#x2F;2, a reasonable amount of preloaded assets won’t block anything else in the critical path…

Just use system fonts. Except on android, it&#x27;s only roboto<p>And do use verdana, it&#x27;s the most readable font. Admit it, you like it here

How to avoid layout shifts caused by CSS loading.<p>How to avoid layout shifts caused by images.<p>How to avoid layout shifts caused by ads.<p>How to avoid layout shifts caused by DOM changes.<p>It is funny how as many things moved to web we still have those basic issues, that would be considered show stopper errors in a desktop app.<p>Sometimes I would like for the browser to keep the state from 0.2 second ago when I decided to tap or click and do something like nothing did change in this time.

With the default settings I find this web page almost impossible to read (with my glasses on). The font is [too] small and the contrast is poor.<p>&quot;Avoiding layout shifts caused by web fonts&quot; is a great topic.<p>&quot;Readability&quot; would be another one.

If OS makers reached some kind of agreement to incorporate the most used 20 web fonts in their OS, 99% of this madness would be gone.

Ironically, this website&#x27;s heading shifted it&#x27;s layout after the new font loaded (:

1. Don’t use web fonts.<p>2. There is no step 2<p>They just slow the web down and often make things less legible in the name of style.

Easy: don’t use them. They are a waste of time anyway. I promise you your users care 0% about whether your font is “just right” or not.

&gt; Most designers will cringe at the thought of showing users a fallback system font.<p>Explaining them that web is not paper, helps removing a lot of this childish behaviour.