zachleat’s avatarzachleat’s Twitter Archive—№ 22,680

              1. I just learned a new thing about web font loading and I’m super pumped up about it. Learning is fun 🕺
                Permalink On twitter.com Twitter logo zachleat’s avatar ♻️ 7 Retweets ❤️ 33 Favorites Mood +7 🙂
            1. …in reply to @zachleat
              Here’s what I’m looking at here—how do the web fonts render while this page loads?
              oh my god twitter doesn’t include alt text from images in their API
              Permalink On twitter.com Twitter logo zachleat’s avatar ♻️ 1 Retweets ❤️ 14 Favorites Mood 0
          1. …in reply to @zachleat
            Pretty sure I found bugs in both Firefox and Chrome while testing this. Safari, you’re cool (thanks be to @Litherum)
            Permalink On twitter.com Twitter logo zachleat’s avatar ♻️ 2 Retweets ❤️ 15 Favorites Mood +4 🙂
        1. …in reply to @zachleat
          Without unicode-range, Firefox requests both web fonts in parallel. Chrome/Safari correctly request fallback sequentially after the subset has loaded. It should wait for the first web font to load to know what code points available in the file and if the fallback is needed.
          oh my god twitter doesn’t include alt text from images in their APIoh my god twitter doesn’t include alt text from images in their APIoh my god twitter doesn’t include alt text from images in their API
          Permalink On twitter.com Twitter logo zachleat’s avatar ♻️ 3 Retweets ❤️ 6 Favorites Mood 0
      1. …in reply to @zachleat
        As @AmeliasBrain notes in @AmeliasBrain/1043184820346445824, swapping the order of the @​font-face blocks (subset last) and using the same font-family name works much better in Firefox.
        oh my god twitter doesn’t include alt text from images in their APIoh my god twitter doesn’t include alt text from images in their API
        Permalink On twitter.com Twitter logo zachleat’s avatar ♻️ 2 Retweets ❤️ 7 Favorites Mood +1 🙂
    1. …in reply to @zachleat
      BUT—Cross browser font loading behavior is still inconsistent: 👍🏻 Firefox: FOUT on missing glyphs 👍🏻-ish: Safari FOIT on missing glyphs 👎🏻 Chrome FOIT on everything Luckily we can use font-display: swap to iron those differences out to our desired preference 🏆
      Permalink On twitter.com Twitter logo zachleat’s avatar ❤️ 2 Favorites Mood +4 🙂
  1. …in reply to @zachleat
    The big takeaway here (inspired by a @_munter_ slide) is that this approach—when paired with font-display—could be a very easy/nice way to do a two stage load for a single web font without requiring any JavaScript.
    On twitter.com Twitter logo zachleat’s avatar ❤️ 3 Favorites Mood +7 🙂
    1. …in reply to @zachleat
      The remaining drawback or outstanding problem being that the subset font is still in use after the full font is loaded. We want to remove it from use entirely so there is no crossover—to take full advantage of any OpenType features in the full font—ligatures, kerning, etc.
      Permalink On twitter.com Twitter logo zachleat’s avatar ❤️ 2 Favorites Mood +5 🙂