Improve font loading strategy

[cogniSyb]

Eliminate Flash of unstyled Content (FOUC)

Figure out

• Whether font-display: swap; needs to be replaced

Requirements

• Create two subsets of each font:
  • basic latin (a-z, A-Z, basic punctuation, numbers)
  • all other characters
• Fonts will be loaded with the CSS Font Loading API
• Subsetted fonts will be loaded as soon as possible, with the following priority:
  1. Volvo Broad Pro
  2. Volvo Novum Regular
  3. Volvo Novum Medium
  4. Volvo Novum Light
• When fonts are loaded, utilize localStorage to cache the subsetted font files
• Upon second visit, check whether localStorage contains the font files and load them instead of downloading them

How to test

• Check which characters a font file contains can be done by dragging a font file to https://wakamaifondue.com/
• Observe differences with loading the page

[BeckyMedlin]

@mollyaljenkins @shirin27 Need clear requirements for this ticket. Thank you!

[BeckyMedlin]

@cogniSyb Is this ticket still needed? We are not seeing an issue any longer.

[cogniSyb]

@BeckyMedlin I've tested again, and the loading issue is still there. Though Volvo Broad shows faster than before, the fonts as a group load as slow as reported. Loading fonts can improve with more than a second.