Header text on mozilla sites (e.g. in "h2") blinks through multiple web-fonts at page-load

[dholbert]

STR:

1. Visit https://www.mozilla.org/en-US/privacy/ in Firefox
2. Open the Firefox DevTools "Network" panel, and check disable cache and change the throttling setting to Regular 3G
3. Reload the page

ACTUAL RESULTS:
The header-text switches between several distinct fonts as they load, causing unnecessary shifts/relayouts. In particular, the "Mozilla Privacy Policy" and "What do we mean..." header-text changes twice (from a local font, to a downloaded web-font, to another final downloaded web-font.

EXPECTED RESULTS:
At most one font-load-triggered relayout for each category of text.

This seems to be because the font-family is specified with multiple web fonts in the list:

font-family: Zilla Slab,Inter,X-LocaleSpecific,sans-serif;

https://www.mozilla.org/media/css/protocol-mozilla.120b0a0d8b56.css

I think that list ultimately comes from the last line here in this repo (hence filing the issue here):

  # Font Stack
  font-stack-base: "Inter, X-LocaleSpecific, sans-serif"
  font-stack-firefox: "Metropolis, Inter, X-LocaleSpecific, sans-serif"
  font-stack-mono: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace"
  font-stack-mozilla: "'Zilla Slab', Inter, X-LocaleSpecific, sans-serif"

protocol-tokens/tokens/_aliases.yml

Line 214 in 4e00fdc

font-stack-mozilla: "'Zilla Slab', Inter, X-LocaleSpecific, sans-serif"

The problem here is that Zilla Slab and Inter are both web-fonts, and apparently Inter finishes downloading first (maybe it's smaller?), so it triggers an initial re-render once it's available; and then finally we get another re-render after another second or so when Zilla Slap is available.

tl;dr: the intermediate re-rendering with Inter does not feel especially useful. Is there a reason we bother including it in the list here and triggering that intermediate re-rendering? Can we just remove it from the two lists where we've got it listed as a fallback (font-stack-firefox and font-stack-mozilla)?

(It looks like this may've been added in #49; I see @craigcook was involved there and perhaps can weigh in or would know who to ask)

[dholbert]

Here's a screencast showing the "ACTUAL RESULTS" from my initial comment here:
screencast-font-loads.webm

I'll post some screenshots from that screencast. I reload the page at t=4s, and then:

• at t=5s, it renders with a local fallback font:
  
• at t=7s, it re-renders with "Inter":
  
• at t=8s, it re-renders with "Zilla Slab":
  

The middle rendering is very brief and doesn't seem especially useful, and could be avoided if we just removed Inter from the list of fallback fonts, I think.

[craigcook]

I imagine the only benefit to having Inter in the font stack is if a user blocks web fonts but happens to have Inter installed locally, which is a very unlikely scenario. Simplifying the Mozilla and Firefox stacks to remove Inter is probably a good idea.

[stephaniehobson]

Fixed in #116

[stephaniehobson]

Oh, not for the Firefox stack, apparently. I'll bundle that with the next token updates.