fonts.html

{% extends "%s/2019/base_chapter.html" % lang %}

<!--{# IMPORTANT!

- `chapter.html` is a "template for templates" used by the `generate_chapters.js` script, hence the strange template syntax (eg, mixing ejs and jinja syntax)
- if you want to modify `chapter.html`, you must also:
  - translate the corresponding language-specific templates (eg `src/templates/<lang>/<year>/chapter.html`)
  - run the generation script to update each chapter template
- if you want to modify the chapter templates (eg `src/templates/<lang>/<year>/chapters/<chapter>.html`):
  - make changes to the markdown content directly (`src/content/<lang>/<year>/<chapter>.md`) because any changes to the chapter templates will be overwritten by the generation script
#}-->

{% set metadata = {"part_number":"I","chapter_number":6,"title":"Fonts","description":"Fonts chapter of the 2019 Web Almanac covering where fonts are loaded from, font formats, font loading performance, variable fonts and color fonts.","authors":["zachleat"],"reviewers":["hyperpress","AymenLoukil"],"translators":null,"discuss":"1761","results":"https://docs.google.com/spreadsheets/d/108g6LXdC3YVsxmX1CCwrmpZ3-DmbB8G_wwgQHX5pn6Q/","queries":"06_Fonts","published":"2019-11-11T00:00:00.000Z","last_updated":"2020-03-02T00:00:00.000Z","chapter":"fonts"} %} {% block index %}
<ul>
  <li>
    <a href="#introduction">Introduction</a>
  </li>

  <li>
    <a href="#where-did-you-get-those-web-fonts">Where did you get those web fonts?</a>

    <ul>
      <li>
        <a href="#are-fonts-being-hosted-on-the-same-host-or-by-a-different-host">Are fonts being hosted on the same host or by a different host?</a>
      </li>

      <li>
        <a href="#what-are-the-most-popular-third-party-hosts">What are the most popular third-party hosts?</a>
      </li>

      <li>
        <a href="#speeding-up-third-party-hosting">Speeding up third-party hosting</a>
      </li>

      <li>
        <a href="#most-popular-typefaces">Most popular typefaces</a>
      </li>
    </ul>
  </li>

  <li>
    <a href="#what-font-formats-are-being-used">What font formats are being used?</a>

    <ul>
      <li>
        <a href="#woff2-only">WOFF2-only</a>
      </li>
    </ul>
  </li>

  <li>
    <a href="#fighting-against-invisible-text">Fighting against invisible text</a>
  </li>

  <li>
    <a href="#how-many-web-fonts-are-too-many">How many web fonts are too many?</a>

    <ul>
      <li>
        <a href="#you-dont-want-to-win-this-award">You don&#39;t want to win this award</a>
      </li>
    </ul>
  </li>

  <li>
    <a href="#more-accurate-matching-with-unicode-range">More accurate matching with unicode-range</a>
  </li>

  <li>
    <a href="#dont-request-web-fonts-if-a-system-font-exists">Don&#39;t request web fonts if a system font exists</a>
  </li>

  <li>
    <a href="#condensed-fonts-and-font-stretch">Condensed fonts and font-stretch</a>
  </li>

  <li>
    <a href="#variable-fonts-are-the-future">Variable fonts are the future</a>
  </li>

  <li>
    <a href="#color-fonts-might-also-be-the-future">Color fonts might also be the future?</a>
  </li>

  <li>
    <a href="#conclusion">Conclusion</a>
  </li>
</ul>

{% endblock %} {% block main_content %}
<h2 id="introduction"><a href="#introduction" class="anchor-link">Introduction</a></h2>
<p>Web fonts enable beautiful and functional typography on the web. 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. 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.</p>
<p>Are 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.</p>
<h2 id="where-did-you-get-those-web-fonts"><a href="#where-did-you-get-those-web-fonts" class="anchor-link">Where did you get those web fonts?</a></h2>
<p>The first and most prominent question: performance. There is a whole chapter dedicated to <a href="./performance">performance</a> but we will delve a little into font-specific performance issues here.</p>
<p>Using hosted web fonts enables ease of implementation and maintenance, but self-hosting offers the best performance. Given that web fonts by default make text invisible while the web font is loading (also known as the <a href="https://css-tricks.com/fout-foit-foft/">Flash of Invisible Text</a>, or FOIT), the performance of web fonts can be more critical than non-blocking assets like images.</p>
<h3 id="are-fonts-being-hosted-on-the-same-host-or-by-a-different-host"><a href="#are-fonts-being-hosted-on-the-same-host-or-by-a-different-host" class="anchor-link">Are fonts being hosted on the same host or by a different host?</a></h3>
<p>Differentiating self-hosting against third-party hosting is increasingly relevant in an <a href="./http2">HTTP/2</a> world, where the performance gap between a same-host and different-host connection can be wider. Same-host requests have the huge benefit of a better potential for prioritization against other same-host requests in the waterfall.</p>
<p>Recommendations to mitigate the performance costs of loading web fonts from another host include using the <code>preconnect</code>, <code>dns-prefetch</code>, and <code>preload</code> <a href="./resource-hints">resource hints</a>, but high priority web fonts should be same-host requests to minimize the performance impact of web fonts. This is especially important for fonts used by very visually prominent content or body copy occupying the majority of a page.</p>
<figure id="fig-1">
  <a href="/static/images/2019/fonts/fig1.png">
    <img src="/static/images/2019/fonts/fig1.png" alt="Figure 1. Popular web font hosting strategies." aria-labelledby="fig1-description" aria-describedby="fig1-caption" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vQDogXDb3BwZZHrBT39qccP_LJoCScD3QEi_FmjT_8VDPD_1Srpz-g7ZuuTUEb8pYXBpDmQzZ1hQh7q/pubchart?oid=1546332659&amp;format=interactive" loading="lazy" />
  </a>
  <button hidden="" class="fig-description-button" aria-expanded="false" aria-controls="fig1-description" data-show-text="{{ show_description(1) }}" data-hide-text="{{ hide_description(1) }}">{{ show_description(1) }}</button>
  <div id="fig1-description" class="visually-hidden">Bar chart showing the popularity of third-party and self-hosting strategies for web fonts. 75% of mobile web pages use third-party hosts and 25% self-host. Desktop websites have similar usage.</div>
  <figcaption id="fig1-caption"><a href="#fig-1" class="anchor-link">Figure 1.</a> Popular web font hosting strategies.</figcaption>
</figure>
<p>The fact that three quarters are hosted is perhaps unsurprising given Google Fonts dominance that we will discuss <a href="#what-are-the-most-popular-third-party-hosts">below</a>.</p>
<p>Google serves fonts using third-party CSS files hosted on <code>https://fonts.googleapis.com</code>. Developers add requests to these stylesheets using <code>&lt;link&gt;</code> tags in their markup. While these stylesheets are render blocking, they are very small. However, the font files are hosted on yet another domain, <code>https://fonts.gstatic.com</code>. The model of requiring two separate hops to two different domains makes <code>preconnect</code> a great option here for the second request that will not be discovered until the CSS is downloaded.</p>
<p>Note that while <code>preload</code> would be a nice addition to load the font files higher in the request waterfall (remember that <code>preconnect</code> sets up the connection, it doesn’t request the file content), <code>preload</code> is not yet available with Google Fonts. Google Fonts generates unique URLs for their font files <a href="https://github.com/google/fonts/issues/1067">which are subject to change</a>.</p>
<h3 id="what-are-the-most-popular-third-party-hosts"><a href="#what-are-the-most-popular-third-party-hosts" class="anchor-link">What are the most popular third-party hosts?</a></h3>
<figure id="fig-2">
  <div class="table-wrap">
    <div class="table-wrap-container">
      <table>
        <thead>
          <tr>
            <th>Host</th>
            <th>Desktop</th>
            <th>Mobile</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>fonts.gstatic.com</td>
            <td class="numeric">75.4%</td>
            <td class="numeric">74.9%</td>
          </tr>
          <tr>
            <td>use.typekit.net</td>
            <td class="numeric">7.2%</td>
            <td class="numeric">6.6%</td>
          </tr>
          <tr>
            <td>maxcdn.bootstrapcdn.com</td>
            <td class="numeric">1.8%</td>
            <td class="numeric">2.0%</td>
          </tr>
          <tr>
            <td>use.fontawesome.com</td>
            <td class="numeric">1.1%</td>
            <td class="numeric">1.2%</td>
          </tr>
          <tr>
            <td>static.parastorage.com</td>
            <td class="numeric">0.8%</td>
            <td class="numeric">1.2%</td>
          </tr>
          <tr>
            <td>fonts.shopifycdn.com</td>
            <td class="numeric">0.6%</td>
            <td class="numeric">0.6%</td>
          </tr>
          <tr>
            <td>cdn.shopify.com</td>
            <td class="numeric">0.5%</td>
            <td class="numeric">0.5%</td>
          </tr>
          <tr>
            <td>cdnjs.cloudflare.com</td>
            <td class="numeric">0.4%</td>
            <td class="numeric">0.5%</td>
          </tr>
          <tr>
            <td>use.typekit.com</td>
            <td class="numeric">0.4%</td>
            <td class="numeric">0.4%</td>
          </tr>
          <tr>
            <td>netdna.bootstrapcdn.com</td>
            <td class="numeric">0.3%</td>
            <td class="numeric">0.4%</td>
          </tr>
          <tr>
            <td>fast.fonts.net</td>
            <td class="numeric">0.3%</td>
            <td class="numeric">0.3%</td>
          </tr>
          <tr>
            <td>static.dealer.com</td>
            <td class="numeric">0.2%</td>
            <td class="numeric">0.2%</td>
          </tr>
          <tr>
            <td>themes.googleusercontent.com</td>
            <td class="numeric">0.2%</td>
            <td class="numeric">0.2%</td>
          </tr>
          <tr>
            <td>static-v.tawk.to</td>
            <td class="numeric">0.1%</td>
            <td class="numeric">0.3%</td>
          </tr>
          <tr>
            <td>stc.utdstc.com</td>
            <td class="numeric">0.1%</td>
            <td class="numeric">0.2%</td>
          </tr>
          <tr>
            <td>cdn.jsdelivr.net</td>
            <td class="numeric">0.2%</td>
            <td class="numeric">0.2%</td>
          </tr>
          <tr>
            <td>kit-free.fontawesome.com</td>
            <td class="numeric">0.2%</td>
            <td class="numeric">0.2%</td>
          </tr>
          <tr>
            <td>open.scdn.co</td>
            <td class="numeric">0.1%</td>
            <td class="numeric">0.1%</td>
          </tr>
          <tr>
            <td>assets.squarespace.com</td>
            <td class="numeric">0.1%</td>
            <td class="numeric">0.1%</td>
          </tr>
          <tr>
            <td>fonts.jimstatic.com</td>
            <td class="numeric">0.1%</td>
            <td class="numeric">0.2%</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <figcaption><a href="#fig-2" class="anchor-link">Figure 2.</a> Top 20 font hosts by percent of requests.</figcaption>
</figure>
<p>The dominance of Google Fonts here was simultaneously surprising and unsurprising at the same time. It was unsurprising in that I expected the service to be the most popular and surprising in the sheer dominance of its popularity. 75% of font requests is astounding. TypeKit was a distant single-digit second place, with the Bootstrap library accounting for an even more distant third place.</p>
<figure id="fig-3">
  <div class="big-number">29%</div>
  <figcaption><a href="#fig-3" class="anchor-link">Figure 3.</a> Percent of pages that include a Google Fonts stylesheet link in the document <code>&lt;head&gt;</code>.</figcaption>
</figure>
<p>While the high usage of Google Fonts here is very impressive, it is also noteworthy that only 29% of pages included a Google Fonts <code>&lt;link&gt;</code> element. This could mean a few things:</p>
<ul>
  <li>When pages uses Google Fonts, they use <em>a lot</em> of Google Fonts. They are provided without monetary cost, after all. Perhaps they're being used in a popular WYSIWYG editor? This seems like a very likely explanation.</li>
  <li>Or a more unlikely story is that it could mean that a lot of people are using Google Fonts with <code>@import</code> instead of <code>&lt;link&gt;</code>.</li>
  <li>
    Or if we want to go off the deep end into super unlikely scenarios, it could mean that many people are using Google Fonts with an <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link">HTTP <code>Link:</code> header</a> instead.
  </li>
</ul>
<figure id="fig-4">
  <div class="big-number">0.4%</div>
  <figcaption><a href="#fig-4" class="anchor-link">Figure 4.</a> Percent of pages that include a Google Fonts stylesheet link as the first child in the document <code>&lt;head&gt;</code>.</figcaption>
</figure>
<p>Google Fonts documentation encourages the <code>&lt;link&gt;</code> for the Google Fonts CSS to be placed as the first child in the <code>&lt;head&gt;</code> of a page. This is a big ask! In practice, this is not common as only half a percent of all pages (about 20,000 pages) took this advice.</p>
<p>More so, if a page is using <code>preconnect</code> or <code>dns-prefetch</code> as <code>&lt;link&gt;</code> elements, these would come before the Google Fonts CSS anyway. Read on for more about these resource hints.</p>
<h3 id="speeding-up-third-party-hosting"><a href="#speeding-up-third-party-hosting" class="anchor-link">Speeding up third-party hosting</a></h3>
<p>As mentioned above, a super easy way to speed up web font requests to a third-party host is to use the <code>preconnect</code> <a href="./resource-hints">resource hint</a>.</p>
<figure id="fig-5">
  <div class="big-number">1.7%</div>
  <figcaption><a href="#fig-5" class="anchor-link">Figure 5.</a> Percent of mobile pages preconnecting to a web font host.</figcaption>
</figure>
<p>
  Wow! Less than 2% of pages are using <a href="https://web.dev/uses-rel-preconnect"><code>preconnect</code></a
  >! Given that Google Fonts is at 75%, this should be higher! Developers: if you use Google Fonts, use <code>preconnect</code>! Google Fonts: proselytize <code>preconnect</code> more!
</p>
<p>In fact, if you're using Google Fonts go ahead and add this to your <code>&lt;head&gt;</code> if it's not there already:</p>
<p><code>&lt;link rel="preconnect" href="https://fonts.gstatic.com/"&gt;</code></p>
<h3 id="most-popular-typefaces"><a href="#most-popular-typefaces" class="anchor-link">Most popular typefaces</a></h3>
<figure id="fig-6">
  <div class="table-wrap">
    <div class="table-wrap-container">
      <table>
        <thead>
          <tr>
            <th>Rank</th>
            <th>Font family</th>
            <th>Desktop</th>
            <th>Mobile</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="numeric">1</td>
            <td>Open Sans</td>
            <td class="numeric">24%</td>
            <td class="numeric">22%</td>
          </tr>
          <tr>
            <td class="numeric">2</td>
            <td>Roboto</td>
            <td class="numeric">15%</td>
            <td class="numeric">19%</td>
          </tr>
          <tr>
            <td class="numeric">3</td>
            <td>Montserrat</td>
            <td class="numeric">5%</td>
            <td class="numeric">4%</td>
          </tr>
          <tr>
            <td class="numeric">4</td>
            <td>Source Sans Pro</td>
            <td class="numeric">4%</td>
            <td class="numeric">3%</td>
          </tr>
          <tr>
            <td class="numeric">5</td>
            <td>Noto Sans JP</td>
            <td class="numeric">3%</td>
            <td class="numeric">3%</td>
          </tr>
          <tr>
            <td class="numeric">6</td>
            <td>Lato</td>
            <td class="numeric">3%</td>
            <td class="numeric">3%</td>
          </tr>
          <tr>
            <td class="numeric">7</td>
            <td>Nanum Gothic</td>
            <td class="numeric">4%</td>
            <td class="numeric">2%</td>
          </tr>
          <tr>
            <td class="numeric">8</td>
            <td>Noto Sans KR</td>
            <td class="numeric">3%</td>
            <td class="numeric">2%</td>
          </tr>
          <tr>
            <td class="numeric">9</td>
            <td>Roboto Condensed</td>
            <td class="numeric">2%</td>
            <td class="numeric">2%</td>
          </tr>
          <tr>
            <td class="numeric">10</td>
            <td>Raleway</td>
            <td class="numeric">2%</td>
            <td class="numeric">2%</td>
          </tr>
          <tr>
            <td class="numeric">11</td>
            <td>FontAwesome</td>
            <td class="numeric">1%</td>
            <td class="numeric">1%</td>
          </tr>
          <tr>
            <td class="numeric">12</td>
            <td>Roboto Slab</td>
            <td class="numeric">1%</td>
            <td class="numeric">1%</td>
          </tr>
          <tr>
            <td class="numeric">13</td>
            <td>Noto Sans TC</td>
            <td class="numeric">1%</td>
            <td class="numeric">1%</td>
          </tr>
          <tr>
            <td class="numeric">14</td>
            <td>Poppins</td>
            <td class="numeric">1%</td>
            <td class="numeric">1%</td>
          </tr>
          <tr>
            <td class="numeric">15</td>
            <td>Ubuntu</td>
            <td class="numeric">1%</td>
            <td class="numeric">1%</td>
          </tr>
          <tr>
            <td class="numeric">16</td>
            <td>Oswald</td>
            <td class="numeric">1%</td>
            <td class="numeric">1%</td>
          </tr>
          <tr>
            <td class="numeric">17</td>
            <td>Merriweather</td>
            <td class="numeric">1%</td>
            <td class="numeric">1%</td>
          </tr>
          <tr>
            <td class="numeric">18</td>
            <td>PT Sans</td>
            <td class="numeric">1%</td>
            <td class="numeric">1%</td>
          </tr>
          <tr>
            <td class="numeric">19</td>
            <td>Playfair Display</td>
            <td class="numeric">1%</td>
            <td class="numeric">1%</td>
          </tr>
          <tr>
            <td class="numeric">20</td>
            <td>Noto Sans</td>
            <td class="numeric">1%</td>
            <td class="numeric">1%</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <figcaption><a href="#fig-6" class="anchor-link">Figure 6.</a> Top 20 font families as a percent of all font declarations.</figcaption>
</figure>
<p>It is unsurprising that the top entries here seem to match up very similarly to <a href="https://fonts.google.com/?sort=popularity">Google Fonts' list of fonts sorted by popularity</a>.</p>
<h2 id="what-font-formats-are-being-used"><a href="#what-font-formats-are-being-used" class="anchor-link">What font formats are being used?</a></h2>
<p><a href="https://caniuse.com/#feat=woff2">WOFF2 is pretty well supported</a> in web browsers today. Google Fonts serves WOFF2, a format that offers improved compression over its predecessor WOFF, which was itself already an improvement over other existing font formats.</p>
<figure id="fig-7">
  <a href="/static/images/2019/fonts/fig7.png">
    <img src="/static/images/2019/fonts/fig7.png" alt="Figure 7. Popularity of web font MIME types." aria-labelledby="fig7-caption" aria-describedby="fig7-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vQDogXDb3BwZZHrBT39qccP_LJoCScD3QEi_FmjT_8VDPD_1Srpz-g7ZuuTUEb8pYXBpDmQzZ1hQh7q/pubchart?oid=998584594&amp;format=interactive" loading="lazy" />
  </a>
  <button hidden="" class="fig-description-button" aria-expanded="false" aria-controls="fig7-description" data-show-text="{{ show_description(7) }}" data-hide-text="{{ hide_description(7) }}">{{ show_description(7) }}</button>
  <div id="fig7-description" class="visually-hidden">Bar chart showing the popularity of web font MIME types. WOFF2 is used on 74% of fonts, followed by 13% WOFF, 6% octet-stream, 3% TTF, 2% plain, 1% HTML, 1% SFNT, and fewer than 1% for all other types. Desktop and mobile have similar distributions.</div>
  <figcaption id="fig7-caption"><a href="#fig-7" class="anchor-link">Figure 7.</a> Popularity of web font MIME types.</figcaption>
</figure>
<p>From my perspective, an argument could be made to go WOFF2-only for web fonts after seeing the results here. I wonder where the double-digit WOFF usage is coming from? Perhaps developers still serving web fonts to Internet Explorer?</p>
<p>Third place <code>octet-stream</code> (and <code>plain</code> a little further down) would seem to suggest that a lot of web servers are configured improperly, sending an incorrect MIME type with web font file requests.</p>
<p>Let's dig a bit deeper and look at the <code>format()</code> values used in the <code>src:</code> property of <code>@font-face</code> declarations:</p>
<figure id="fig-8">
  <a href="/static/images/2019/fonts/fig8.png">
    <img src="/static/images/2019/fonts/fig8.png" alt="Figure 8. Popularity of font formats in <code>@font-face</code> declarations." aria-labelledby="fig8-caption" aria-describedby="fig8-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vQDogXDb3BwZZHrBT39qccP_LJoCScD3QEi_FmjT_8VDPD_1Srpz-g7ZuuTUEb8pYXBpDmQzZ1hQh7q/pubchart?oid=700778025&amp;format=interactive" loading="lazy" />
  </a>
  <button hidden="" class="fig-description-button" aria-expanded="false" aria-controls="fig8-description" data-show-text="{{ show_description(8) }}" data-hide-text="{{ hide_description(8) }}">{{ show_description(8) }}</button>
  <div id="fig8-description" class="visually-hidden">Bar chart showing the popularity of formats used in font-face declarations. 69% of desktop pages' @font-face declarations specify the WOFF2 format, 11% WOFF, 10% TrueType, 8% SVG, 2% EOT, and fewer than 1% OpenType, TTF, and OTF. The distribution for mobile pages is similar.</div>
  <figcaption id="fig8-caption"><a href="#fig-8" class="anchor-link">Figure 8.</a> Popularity of font formats in <code>@font-face</code> declarations.</figcaption>
</figure>
<p>I was hoping to see <a href="https://caniuse.com/#feat=svg-fonts">SVG fonts</a> on the decline. They're buggy and implementations have been removed from every browser except Safari. Time to drop these, y'all.</p>
<p>The SVG data point here also makes me wonder what MIME type y'all are serving these SVG fonts with. I don't see <code>image/svg+xml</code> anywhere in Figure 7. Anyway, don't worry about fixing that, just get rid of them!</p>
<h3 id="woff2-only"><a href="#woff2-only" class="anchor-link">WOFF2-only</a></h3>
<figure id="fig-9">
  <div class="table-wrap">
    <div class="table-wrap-container">
      <table>
        <thead>
          <tr>
            <th>Rank</th>
            <th>Format combinations</th>
            <th>Desktop</th>
            <th>Mobile</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="numeric">1</td>
            <td>woff2</td>
            <td class="numeric">84.0%</td>
            <td class="numeric">81.9%</td>
          </tr>
          <tr>
            <td class="numeric">2</td>
            <td>svg, truetype, woff</td>
            <td class="numeric">4.3%</td>
            <td class="numeric">4.0%</td>
          </tr>
          <tr>
            <td class="numeric">3</td>
            <td>svg, truetype, woff, woff2</td>
            <td class="numeric">3.5%</td>
            <td class="numeric">3.2%</td>
          </tr>
          <tr>
            <td class="numeric">4</td>
            <td>eot, svg, truetype, woff</td>
            <td class="numeric">1.3%</td>
            <td class="numeric">2.9%</td>
          </tr>
          <tr>
            <td class="numeric">5</td>
            <td>woff, woff2</td>
            <td class="numeric">1.8%</td>
            <td class="numeric">1.8%</td>
          </tr>
          <tr>
            <td class="numeric">6</td>
            <td>eot, svg, truetype, woff, woff2</td>
            <td class="numeric">1.2%</td>
            <td class="numeric">2.1%</td>
          </tr>
          <tr>
            <td class="numeric">7</td>
            <td>truetype, woff</td>
            <td class="numeric">0.9%</td>
            <td class="numeric">1.1%</td>
          </tr>
          <tr>
            <td class="numeric">8</td>
            <td>woff</td>
            <td class="numeric">0.7%</td>
            <td class="numeric">0.8%</td>
          </tr>
          <tr>
            <td class="numeric">9</td>
            <td>truetype</td>
            <td class="numeric">0.6%</td>
            <td class="numeric">0.7%</td>
          </tr>
          <tr>
            <td class="numeric">10</td>
            <td>truetype, woff, woff2</td>
            <td class="numeric">0.6%</td>
            <td class="numeric">0.6%</td>
          </tr>
          <tr>
            <td class="numeric">11</td>
            <td>opentype, woff, woff2</td>
            <td class="numeric">0.3%</td>
            <td class="numeric">0.2%</td>
          </tr>
          <tr>
            <td class="numeric">12</td>
            <td>svg</td>
            <td class="numeric">0.2%</td>
            <td class="numeric">0.2%</td>
          </tr>
          <tr>
            <td class="numeric">13</td>
            <td>eot, truetype, woff</td>
            <td class="numeric">0.1%</td>
            <td class="numeric">0.2%</td>
          </tr>
          <tr>
            <td class="numeric">14</td>
            <td>opentype, woff</td>
            <td class="numeric">0.1%</td>
            <td class="numeric">0.1%</td>
          </tr>
          <tr>
            <td class="numeric">15</td>
            <td>opentype</td>
            <td class="numeric">0.1%</td>
            <td class="numeric">0.1%</td>
          </tr>
          <tr>
            <td class="numeric">16</td>
            <td>eot</td>
            <td class="numeric">0.1%</td>
            <td class="numeric">0.1%</td>
          </tr>
          <tr>
            <td class="numeric">17</td>
            <td>opentype, svg, truetype, woff</td>
            <td class="numeric">0.1%</td>
            <td class="numeric">0.0%</td>
          </tr>
          <tr>
            <td class="numeric">18</td>
            <td>opentype, truetype, woff, woff2</td>
            <td class="numeric">0.0%</td>
            <td class="numeric">0.0%</td>
          </tr>
          <tr>
            <td class="numeric">19</td>
            <td>eot, truetype, woff, woff2</td>
            <td class="numeric">0.0%</td>
            <td class="numeric">0.0%</td>
          </tr>
          <tr>
            <td class="numeric">20</td>
            <td>svg, woff</td>
            <td class="numeric">0.0%</td>
            <td class="numeric">0.0%</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <figcaption><a href="#fig-9" class="anchor-link">Figure 9.</a> Top 20 font format combinations.</figcaption>
</figure>
<p>This dataset seems to suggest that the majority of people are already using WOFF2-only in their <code>@font-face</code> blocks. But this is misleading of course, per our earlier discussion on the dominance of Google Fonts in the data set. Google Fonts does some sniffing methods to serve a streamlined CSS file and only includes the most modern <code>format()</code>. Unsurprisingly, WOFF2 dominates the results here for that reason, as browser support for WOFF2 has been pretty broad for some time now.</p>
<p>Importantly, this particular data doesn't really support or detract from the case to go WOFF2-only yet, but it remains a tempting idea.</p>
<h2 id="fighting-against-invisible-text"><a href="#fighting-against-invisible-text" class="anchor-link">Fighting against invisible text</a></h2>
<p>The number one tool we have to fight the default web font loading behavior of "invisible while loading" (also known as FOIT), is <code>font-display</code>. Adding <code>font-display: swap</code> to your <code>@font-face</code> block is an easy way to tell the browser to show fallback text while the web font is loading.</p>
<p><a href="https://caniuse.com/#feat=mdn-css_at-rules_font-face_font-display">Browser support</a> is great too. 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). For our Chrome tests, how commonly is <code>font-display</code> used?</p>
<figure id="fig-10">
  <div class="big-number">26%</div>
  <figcaption><a href="#fig-10" class="anchor-link">Figure 10.</a> Percent of mobile pages that utilize the <code>font-display</code> style.</figcaption>
</figure>
<p>
  I assume this will be creeping up over time, especially now that <a href="https://www.zachleat.com/web/google-fonts-display/">Google Fonts is adding <code>font-display</code> to all new code snippets</a> copied from their site.
</p>
<p>If you're using Google Fonts, update your snippets! If you're not using Google Fonts, use <code>font-display</code>! Read more about <code>font-display</code> on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display">MDN</a>.</p>
<p>Let's have a look at what <code>font-display</code> values are popular:</p>
<figure id="fig-11">
  <a href="/static/images/2019/fonts/fig11.png">
    <img src="/static/images/2019/fonts/fig11.png" alt="Figure 11. Usage of 'font-display' values." aria-labelledby="fig11-caption" aria-describedby="fig11-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vQDogXDb3BwZZHrBT39qccP_LJoCScD3QEi_FmjT_8VDPD_1Srpz-g7ZuuTUEb8pYXBpDmQzZ1hQh7q/pubchart?oid=1988783738&amp;format=interactive" loading="lazy" />
  </a>
  <button hidden="" class="fig-description-button" aria-expanded="false" aria-controls="fig11-description" data-show-text="{{ show_description(11) }}" data-hide-text="{{ hide_description(11) }}">{{ show_description(11) }}</button>
  <div id="fig11-description" class="visually-hidden">Bar chart showing the usage of the font-display style. 2.6% of mobile pages set this style to "swap", 1.5% to "auto", 0.7% to "block", 0.4% to "fallback", 0.2% to optional, and 0.1% to "swap" enclosed in quotes, which is invalid. The desktop distribution is similar except "swap" usage is lower by 0.4 percentage points and "auto" usage is higher by 0.1 percentage points.</div>
  <figcaption id="fig11-caption"><a href="#fig-11" class="anchor-link">Figure 11.</a> Usage of <code>font-display</code> values.</figcaption>
</figure>
<p>As an easy way to show fallback text while a web font is loading, <code>font-display: swap</code> reigns supreme and is the most common value. <code>swap</code> is also the default value used by new Google Fonts code snippets too. I would have expected <code>optional</code> (only render if cached) to have a bit more usage here as a few prominent developer evangelists lobbied for it a bit, but no dice.</p>
<h2 id="how-many-web-fonts-are-too-many"><a href="#how-many-web-fonts-are-too-many" class="anchor-link">How many web fonts are too many?</a></h2>
<p>This is a question that requires some measure of nuance. How are the fonts being used? For how much content on the page? Where does this content live in the layout? How are the fonts being rendered? In lieu of nuance however let's dive right into some broad and heavy handed analysis specifically centered on request counts.</p>
<figure id="fig-12">
  <a href="/static/images/2019/fonts/fig12.png">
    <img src="/static/images/2019/fonts/fig12.png" alt="Figure 12. Distribution of font requests per page." aria-labelledby="fig12-caption" aria-describedby="fig12-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vQDogXDb3BwZZHrBT39qccP_LJoCScD3QEi_FmjT_8VDPD_1Srpz-g7ZuuTUEb8pYXBpDmQzZ1hQh7q/pubchart?oid=451821825&amp;format=interactive" loading="lazy" />
  </a>
  <button hidden="" class="fig-description-button" aria-expanded="false" aria-controls="fig12-description" data-show-text="{{ show_description(12) }}" data-hide-text="{{ hide_description(12) }}">{{ show_description(12) }}</button>
  <div id="fig12-description" class="visually-hidden">Bar chart showing the distribution of font requests per page. The 10, 25, 50, 75, and 90th percentiles for desktop are: 0, 1, 3, 6, and 9 font requests. The distribution for mobile is identical until the 75th and 90th percentiles, where mobile pages request 1 fewer font.</div>
  <figcaption id="fig12-caption"><a href="#fig-12" class="anchor-link">Figure 12.</a> Distribution of font requests per page.</figcaption>
</figure>
<p>The median web page makes three web font requests. At the 90th percentile, requested six and nine web fonts on mobile and desktop, respectively.</p>
<figure id="fig-13">
  <a href="/static/images/2019/fonts/fig13.png">
    <img src="/static/images/2019/fonts/fig13.png" alt="Figure 13. Histogram of web fonts requested per page." aria-labelledby="fig13-description" aria-describedby="fig13-caption" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vQDogXDb3BwZZHrBT39qccP_LJoCScD3QEi_FmjT_8VDPD_1Srpz-g7ZuuTUEb8pYXBpDmQzZ1hQh7q/pubchart?oid=1755200484&amp;format=interactive" loading="lazy" />
  </a>
  <button hidden="" class="fig-description-button" aria-expanded="false" aria-controls="fig13-description" data-show-text="{{ show_description(13) }}" data-hide-text="{{ hide_description(13) }}">{{ show_description(13) }}</button>
  <div id="fig13-description" class="visually-hidden">Histogram showing the distribution of the number of font requests per page. The most popular number of font requests is 0 at 22% of desktop pages. The distribution drops to 9% of pages having 1 font, then crests at 10% for 2-4 fonts before falling as the number of fonts increases. The desktop and mobile distributions are similar, although the mobile distribution skews slightly toward having fewer fonts per page.</div>
  <figcaption id="fig13-caption"><a href="#fig-13" class="anchor-link">Figure 13.</a> Histogram of web fonts requested per page.</figcaption>
</figure>
<p>
  It does seem quite interesting that web font requests seem to be pretty steady across desktop and mobile. I'm glad to see the <a href="https://css-tricks.com/snippets/css/using-font-face/#article-header-id-6">recommendation to hide <code>@font-face</code> blocks inside of a <code>@media</code> queries</a> didn't catch on (don't get any ideas).
</p>
<p>That said there are marginally more requests for fonts made on mobile devices. My hunch here is that fewer typefaces are available on mobile devices, which in turn means fewer <code>local()</code> hits in Google Fonts CSS, falling back to network requests for these.</p>
<h3 id="you-dont-want-to-win-this-award"><a href="#you-dont-want-to-win-this-award" class="anchor-link">You don't want to win this award</a></h3>
<figure id="fig-14">
  <div class="big-number">718</div>
  <figcaption><a href="#fig-14" class="anchor-link">Figure 14.</a> The most web font requests on a single page.</figcaption>
</figure>
<p>The award for the page that requests the most web fonts goes to a site that made <strong>718</strong> web font requests!</p>
<p>After diving into the code, all of those 718 requests are going to Google Fonts! It looks like a malfunctioning "Above the Page fold" optimization plugin for WordPress has gone rogue on this site and is requesting (DDoS-ing?) all the Google Fonts—oops!</p>
<p>Ironic that a performance optimization plugin can make your performance much worse!</p>
<h2 id="more-accurate-matching-with-unicode-range">
  <a href="#more-accurate-matching-with-unicode-range" class="anchor-link">More accurate matching with <code>unicode-range</code></a>
</h2>
<figure id="fig-15">
  <div class="big-number">56%</div>
  <figcaption><a href="#fig-15" class="anchor-link">Figure 15.</a> Percent of mobile pages that declare a web font with the <code>unicode-range</code> property.</figcaption>
</figure>
<p>
  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face/unicode-range"><code>unicode-range</code></a> is a great CSS property to let the browser know specifically which code points the page would like to use in the font file. If the <code>@font-face</code> declaration has a <code>unicode-range</code>, content on the page must match one of the code points in the range before the font is requested. It is a very good thing.
</p>
<p>This is another metric that I expect was skewed by Google Fonts usage, as Google Fonts uses <code>unicode-range</code> in most (if not all) of its CSS. I'd expect this to be less common in user land, but perhaps filtering out Google Fonts requests in the next edition of the Almanac may be possible.</p>
<h2 id="dont-request-web-fonts-if-a-system-font-exists"><a href="#dont-request-web-fonts-if-a-system-font-exists" class="anchor-link">Don't request web fonts if a system font exists</a></h2>
<figure id="fig-16">
  <div class="big-number">59%</div>
  <figcaption><a href="#fig-16" class="anchor-link">Figure 16.</a> Percent of mobile pages that declare a web font with the <code>local()</code> property.</figcaption>
</figure>
<p><code>local()</code> is a nice way to reference a system font in your <code>@font-face</code> <code>src</code>. If the <code>local()</code> font exists, it doesn't need to make a request for a web font at all. This is used both extensively and controversially by Google Fonts, so it is likely another example of skewed data if we're trying to glean patterns from user land.</p>
<p>
  It should also be noted here that it has been said by smarter people than I (Bram Stein of TypeKit) that <a href="https://bramstein.com/writing/web-font-anti-patterns-local-fonts.html">using <code>local()</code> can be unpredictable as installed versions of fonts can be outdated and unreliable</a>.
</p>
<h2 id="condensed-fonts-and-font-stretch">
  <a href="#condensed-fonts-and-font-stretch" class="anchor-link">Condensed fonts and <code>font-stretch</code></a>
</h2>
<figure id="fig-17">
  <div class="big-number">7%</div>
  <figcaption><a href="#fig-17" class="anchor-link">Figure 17.</a> Percent of desktop and mobile pages that include a style with the <code>font-stretch</code> property.</figcaption>
</figure>
<p>
  Historically, <code>font-stretch</code> has suffered from poor browser support and was not a well-known <code>@font-face</code> property. Read more about <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch"><code>font-stretch</code> on MDN</a>. But <a href="https://caniuse.com/#feat=css-font-stretch">browser support</a> has broadened.
</p>
<p>It has been suggested that using condensed fonts on smaller viewports allows more text to be viewable, but this approach isn't commonly used. That being said, that this property is used half a percentage point more on desktop than mobile is unexpected, and 7% seems much higher than I would have predicted.</p>
<h2 id="variable-fonts-are-the-future"><a href="#variable-fonts-are-the-future" class="anchor-link">Variable fonts are the future</a></h2>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts</a> allow several font weights and styles to be included in the one font file.</p>
<figure id="fig-18">
  <div class="big-number">1.8%</div>
  <figcaption><a href="#fig-18" class="anchor-link">Figure 18.</a> Percent of pages that include a variable font.</figcaption>
</figure>
<p>Even at 1.8% this was higher than expected, although I am excited to see this take off. <a href="https://developers.google.com/fonts/docs/css2">Google Fonts v2</a> does include some support for variable fonts.</p>
<figure id="fig-19">
  <a href="/static/images/2019/fonts/fig19.png">
    <img src="/static/images/2019/fonts/fig19.png" alt="Figure 19. Usage of 'font-variation-settings' axes." aria-labelledby="fig19-caption" aria-describedby="fig19-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vQDogXDb3BwZZHrBT39qccP_LJoCScD3QEi_FmjT_8VDPD_1Srpz-g7ZuuTUEb8pYXBpDmQzZ1hQh7q/pubchart?oid=699343351&amp;format=interactive" loading="lazy" />
  </a>
  <button hidden="" class="fig-description-button" aria-expanded="false" aria-controls="fig19-description" data-show-text="{{ show_description(19) }}" data-hide-text="{{ hide_description(19) }}">{{ show_description(19) }}</button>
  <div id="fig19-description" class="visually-hidden">Bar chart showing the usage of the font-variation-settings property. 42% of properties on desktop pages are set to the "opsz" value, 32% to "wght", 16% to "wdth", 2% or fewer to "roun", "crsb", "slnt", "inln", and more. The most notable differences between desktop and mobile pages are 26% usage of "opsz", 38% of "wght", and 23% of "wdth".</div>
  <figcaption id="fig19-caption"><a href="#fig-19" class="anchor-link">Figure 19.</a> Usage of <code>font-variation-settings</code> axes.</figcaption>
</figure>
<p>Through the lens of this large data set, these are very low sample sizes-take these results with a grain of salt. However, <code>opsz</code> as the most common axis on desktop pages is notable, with <code>wght</code> and <code>wdth</code> trailing. In my experience, the introductory demos for variable fonts are usually weight-based.</p>
<h2 id="color-fonts-might-also-be-the-future"><a href="#color-fonts-might-also-be-the-future" class="anchor-link">Color fonts might also be the future?</a></h2>
<figure id="fig-20">
  <div class="big-number">117</div>
  <figcaption><a href="#fig-20" class="anchor-link">Figure 20.</a> The number of desktop web pages that include a color font.</figcaption>
</figure>
<p>Usage here of these is basically nonexistent but you can check out the excellent resource <a href="https://www.colorfonts.wtf/">Color Fonts! WTF?</a> for more information. Similar (but not at all) to the SVG format for fonts (which is bad and going away), this allows you to embed SVG inside of OpenType files, which is awesome and cool.</p>
<h2 id="conclusion"><a href="#conclusion" class="anchor-link">Conclusion</a></h2>
<p>The biggest takeaway here is that Google Fonts dominates the web font discussion. Approaches they've taken weigh heavily on the data we've recorded here. The positives here are easy access to web fonts, good font formats (WOFF2), and for-free <code>unicode-range</code> configurations. The downsides here are performance drawbacks associated with third-party hosting, different-host requests, and no access to <code>preload</code>.</p>
<p>I fully expect that in the future we'll see the "Rise of the Variable Font". This <em>should</em> be paired with a decline in web font requests, as Variable Fonts combine multiple individual font files into a single composite font file. But history has shown us that what usually happens here is that we optimize a thing and then add more things to fill the vacancy.</p>
<p>It will be very interesting to see if color fonts increase in popularity. I expect these to be far more niche than variable fonts but may see a lifeline in the icon font space.</p>
<p>Keep those fonts frosty, y'all.</p>
{% endblock %}