<story><title>How to avoid layout shifts caused by web fonts</title><url>https://simonhearne.com/2021/layout-shifts-webfonts/</url></story><parent_chain></parent_chain><comment><author>divbzero</author><text>The suggestion I like the most is &lt;i&gt;3.4) Use system fonts&lt;/i&gt;:&lt;p&gt;&lt;pre&gt;&lt;code&gt;  body {
    font-family: -apple-system, BlinkMacSystemFont,
      &amp;quot;Segoe UI&amp;quot;, &amp;quot;Roboto&amp;quot;, &amp;quot;Oxygen&amp;quot;, &amp;quot;Ubuntu&amp;quot;, &amp;quot;Cantarell&amp;quot;,
      &amp;quot;Fira Sans&amp;quot;, &amp;quot;Droid Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;,
      sans-serif;
  }
&lt;/code&gt;&lt;/pre&gt;
Stack Overflow took this approach last year with the following font stack: [1]&lt;p&gt;&lt;pre&gt;&lt;code&gt;  @ff-sans:
    system-ui, -apple-system, BlinkMacSystemFont, &amp;#x2F;&amp;#x2F; San Francisco on macOS and iOS
    &amp;quot;Segoe UI&amp;quot;, &amp;#x2F;&amp;#x2F; Windows
    &amp;quot;Ubuntu&amp;quot;, &amp;#x2F;&amp;#x2F; Ubuntu
    &amp;quot;Roboto&amp;quot;, &amp;quot;Noto Sans&amp;quot;, &amp;quot;Droid Sans&amp;quot;, &amp;#x2F;&amp;#x2F; Chrome OS and Android with fallbacks
    sans-serif; &amp;#x2F;&amp;#x2F; The final fallback for rendering in sans-serif.
  @ff-serif: Georgia, Cambria, &amp;quot;Times New Roman&amp;quot;, Times, serif;
  @ff-mono:
    ui-monospace, &amp;#x2F;&amp;#x2F; San Francisco Mono on macOS and iOS
    &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Segoe UI Mono&amp;quot;, &amp;#x2F;&amp;#x2F; Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas
    &amp;quot;Ubuntu Mono&amp;quot;, &amp;#x2F;&amp;#x2F; Ubuntu
    &amp;quot;Roboto Mono&amp;quot;, &amp;#x2F;&amp;#x2F; Chrome OS and Android
    Menlo, Monaco, Consolas, &amp;#x2F;&amp;#x2F; A few sensible system font choices
    monospace; &amp;#x2F;&amp;#x2F; The final fallback for rendering in monospace.
&lt;/code&gt;&lt;/pre&gt;
[1]: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;meta.stackexchange.com&amp;#x2F;questions&amp;#x2F;364048&amp;#x2F;we-are-switching-to-system-fonts-on-may-10-2021&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;meta.stackexchange.com&amp;#x2F;questions&amp;#x2F;364048&amp;#x2F;we-are-switc...&lt;/a&gt;</text></comment>
<story><title>How to avoid layout shifts caused by web fonts</title><url>https://simonhearne.com/2021/layout-shifts-webfonts/</url></story><parent_chain></parent_chain><comment><author>mattbee</author><text>He forgot one: inline the font data (evil cackle).&lt;p&gt;This made sense for me in conjunction with subsetting for a stopwatch app that only needs 10 digits and a colon.&lt;p&gt;I submit it&amp;#x27;s not so bad if you inline it with the rest of your styling, at least that&amp;#x27;s cacheable separate from the content.</text></comment>