Webfont Improvements

[Mischback]

This is a follow up to #30.

Pareto 20%

• [ ] match the webfonts as good as possible with system fonts
  • [ ] Flash of Invisible Text (FOIT):
  • [x] font-display: swap;
  • [ ] https://www.cssfontstack.com/
  • [ ] https://web.dev/css-size-adjust/
  • [ ] https://www.zachleat.com/web/comprehensive-webfonts/
  • [ ] https://meowni.ca/font-style-matcher/
  • MonaSans:
    • fallback font: Verdana (availability Win/Mac > 99%)
    • MonaSans settings

      font-family: "Mona-Sans.woff2"
      font-size: 18px
      line-height: 1.5
      font-weight: 400;

    • Verdana settings

      font-size: 16px
      line-height: 1.7
      font-family: Verdana

Related / Follow up

• 34 for further technical optimization.

[Mischback]

Resources

• Article on Smashing Magazine
• highly relevant article, describing the switch from GoogleFonts, applicable to optimizing fonts from scratch