⚡️ feat(fonts): optimise font size

[welpo]

Summary

This PR significantly reduces font file sizes while maintaining key typographic features and maintaining most language support. It impacts all tabi fonts: Cascadia Code, Inter, and Source Serif 4 fonts.

Related issue: #174.

Changes

1. Cascadia Code: Format Retained, Subsetted to Basic ASCII and Ligatures

   • Initial size: 130K
   • Final size: 13K

     pyftsubset CascadiaCode-SemiLight.woff2 \
     --layout-features="kern,liga" \
     --desubroutinize \
     --unicodes=U+0020-007E,U+00A0-00FF \
     --flavor=woff2 \
      --output-file=font_with_accents.woff2

   • Includes basic ASCII, coding ligatures, and common accented characters for Spanish, French, and Italian.

2. Inter: Updated to Latest Version, Subsetted for Broad Language Support

   • Initial size: 254K
   • Final size: 168K

   pyftsubset InterVariable.woff2 \
     --layout-features="kern,liga,calt" \
     --desubroutinize \
     --unicodes="U+0020-00FF,U+0080-00FF,U+0100-024F,U+1E00-1EFF,\
                 U+0400-052F,U+0391-03D6,\
                 U+4E00-9FFF,U+3400-4DBF,U+20000-2A6DF,\
                 U+3040-309F,U+30A0-30FF,\
                 U+0600-06FF,U+2000-206F,U+2190-21FF" \
     --flavor=woff2 \
     --output-file=optimized_font_with_kerning.woff2

   • Extended language support, including Latin, Cyrillic, Greek, Arabic, and more.

3. Source Serif 4: Moved to OTF, Subsetted for Broad Language Support

   • Initial size: 419K
   • Final size: 253K

   pyftsubset SourceSerif4Variable-Roman.otf.woff2 \
     --layout-features="kern,liga" \
     --desubroutinize \
     --unicodes="U+0020-00FF,U+0100-024F,U+1E00-1EFF,\
                 U+0400-052F,U+0391-03D6,\
                 U+4E00-9FFF,U+3400-4DBF,U+20000-2A6DF,\
                 U+3040-309F,U+30A0-30FF,\
                 U+0600-06FF,U+2000-206F" \
     --flavor=woff2 \
     --output-file=optimized_font.woff2

Benefits

• Performance: The aggregate font sizes are reduced from 803K to ~434K, almost a 50% reduction.
• Broad Language Support: The subsetted fonts cover a diverse set of languages and scripts. Enough for 99% of users (I hope!).
• Up-to-date: Fonts have been updated to their latest available versions.

---

Custom Optimisation

If the provided font subsets don't cover your particular needs—say, you require characters from a specific script like Devanagari or you're sure you won't use any non-English characters—you can easily create your own subsets.

Steps

1. Download the Font: Download the full WOFF2 or OTF font file from the respective repository or official website.

2. Run the pyftsubset Command: Use the pyftsubset command to specify the range of characters, layout features, and other options. Place the resulting file in your static/fonts/ directory (not the theme's directory). The new file will load, instead of the theme's.

   • Example for Devanagari Support:

   pyftsubset YourFont.woff2 \
     --layout-features="kern,liga" \
     --unicodes="U+0020-007E,U+0900-097F" \
     --flavor=woff2 \
     --output-file=your_custom_font.woff2

Or, if you'll only write in English, perhaps a smaller subset with punctuation, currency and some symbols would suffice:

pyftsubset CascadiaCode-SemiLight.woff2 \
--layout-features="kern,liga" \
--desubroutinize \
--unicodes=U+0020-007E,U+00A0-00FF,U+2000-206F,U+20A0-20CF,U+2100-214F \
--flavor=woff2 \
--output-file=font_with_extended_characters.woff2

Note: replace YourFont.woff2 and your_custom_font.woff2 with the relevant file names. The name of the file you place on your static/fonts directory must match the of the file you're "overwriting" (e.g. SourceSerif4Variable-Roman.otf.woff2 or Inter4.woff2).

[donovanglover]

This is great, however I think the Source Serif font got messed up somehow. The letters are generally bigger and don't line up with each other. Looks fine in Chromium but seems broken in Firefox and qutebrowser.

[welpo]

Interesting. It looks fine to me on Firefox and Chromium, but on qutebrowser the letters are indeed broken. I will look into it; thanks for reporting it.

[welpo]

It should be fixed. For some reason, qutebrowser didn't like the otf version of the font. I've reverted to using ttf in commit 4687418.

[donovanglover]

Thanks! Looks like it works but .woff should be .woff2

[welpo]

🤦‍♂️ Thanks! Fixed 5aece98