💄 style(fonts): change font fallback implementation

[stekershaw]

Summary

Instead of defining fall back from local font to URL download in @font-face at-rules, implement fall back more in the font-family font stacks.

Using the font-family is the simplest way to allow the browser to fully use local font families, including italic fonts.

Using custom font-family names in the @font-face rules avoids conflict with well-known font families so that the custom subsets will only be referenced explicitly, not unintentionally.

Related issue

#472

Changes

Move the prioritisation of local fonts from @font-face to the main CSS font-family declarations and use custom font-family names in the @font-face at-rules. For example, change from:

--code-font: 'Cascadia Code';

@font-face {
    src: local('Cascadia Code'),
        url('fonts/CascadiaCode-SemiLight.woff2') format("woff2");
    font-family: 'Cascadia Code';
}

To:

--code-font: 'Cascadia Code', 'Cascadia Code subset';

@font-face {
    src: url('fonts/CascadiaCode-SemiLight.woff2') format("woff2");
    font-family: 'Cascadia Code subset';
}

The fallback functions the same but:

• When the font family is found locally all fonts can be used (e.g. regular and italic styles), without needing to write multiple @font-face rules.
• Anyone using custom CSS can use the common font families like Cascadia Code without having knowledge of tabi implementation

Notable differences that could be considered notable or possibly breaking changes:

• If the local italic fonts are now used then italic text may be rendered differently to before (which had italics faked by the browser by slanting the regular font)
  • I think this is more expected behaviour
• If anyone had custom CSS using the font families Inter, Source Serif, or Cascadia Code then they will no longer have a fallback to the theme-bundled subsets.
  • I don't expect that the fallback when using these font families would be expected and used in custom CSS, but you never know

Screenshots

Before the tabi site viewed on Windows has a local regular font for italic text in code block:

After, the italics are rendered with the local italic font:

On a Mac when I override the fonts with my desired font stack I can see Menlo Italic being used, with no requests to download fonts.

Type of change

• Bug fix (fixes an issue without altering functionality)
• New feature (adds non-breaking functionality)
• Breaking change (alters existing functionality)
• UI/UX improvement (enhances user interface without altering functionality)
• Refactor (improves code quality without altering functionality)
• Documentation update
• Other (please describe below)

---

Checklist

• I have verified the accessibility of my changes
• I have tested all possible scenarios for this chane

[netlify]

✅ Deploy Preview for tabi-demo ready!

Name	Link
🔨 Latest commit	572f8ef
🔍 Latest deploy log	https://app.netlify.com/sites/tabi-demo/deploys/67978d8fb784cb000825d714
😎 Deploy Preview	https://deploy-preview-473--tabi-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.