deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2026-02-15 23:57:19 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1
tabi/blog/custom-font-subset/index.html
GitHub Actions 5340fa3b9d Deploy welpo/tabi to welpo/tabi:gh-pages
2026-02-14 22:16:46 +00:00

114 lines
No EOL
38 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=en><head><meta charset=UTF-8><meta content="default-src 'self';font-src 'self' data:;img-src 'self' https://* data:;media-src 'self' https://cdn.jsdelivr.net/;style-src 'self';frame-src player.vimeo.com https://www.youtube-nocookie.com;connect-src 'self' https://tabi-stats.osc.garden vhiweeypifbwacashxjz.supabase.co;script-src 'self' https://tabi-stats.osc.garden cdn.jsdelivr.net 'self'" http-equiv=Content-Security-Policy><meta content="width=device-width,initial-scale=1.0" name=viewport><meta content=https://welpo.github.io/tabi name=base><title>
~/tabi • Optimise loading times with a custom font subset</title><link href=https://welpo.github.io/tabi/img/seedling.png rel=icon type=image/png><link href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50%" x="50%" dominant-baseline="central" text-anchor="middle" font-size="88">🌱</text></svg>' rel=icon><link title="~/tabi - Atom Feed" href=https://welpo.github.io/tabi/atom.xml rel=alternate type=application/atom+xml><link href="https://welpo.github.io/tabi/custom_subset.css?h=0b9535a28bc3d5bf2321" rel=stylesheet><link href="https://welpo.github.io/tabi/main.css?h=045c365e19a4d50a64bb" rel=stylesheet><meta content="light dark" name=color-scheme><meta content=#087e96 name=theme-color><meta content="Learn how to create a custom subset that only includes the necessary glyphs." name=description><meta content="Learn how to create a custom subset that only includes the necessary glyphs." property=og:description><meta content="Optimise loading times with a custom font subset" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/custom-font-subset/social_cards/blog_custom_font_subset.jpg?h=0e516edca740ba4fa780" property=og:image><meta content=1400 property=og:image:width><meta content=800 property=og:image:height><meta content="https://welpo.github.io/tabi/blog/custom-font-subset/social_cards/blog_custom_font_subset.jpg?h=0e516edca740ba4fa780" name=twitter:image><meta content=summary_large_image name=twitter:card><meta content=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/custom-font-subset/ hreflang=ca rel=alternate><meta content=es_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/es/blog/custom-font-subset/ hreflang=es rel=alternate><meta content=en_GB property=og:locale:alternate><link href=https://welpo.github.io/tabi/blog/custom-font-subset/ hreflang=en rel=alternate><meta content=https://welpo.github.io/tabi/blog/custom-font-subset/ property=og:url><meta content=~/tabi property=og:site_name><noscript><link href=https://welpo.github.io/tabi/no_js.css rel=stylesheet></noscript><script src=https://welpo.github.io/tabi/js/initializeTheme.min.js></script><script defer src=https://welpo.github.io/tabi/js/themeSwitcher.min.js></script><script async data-goatcounter=https://tabi-stats.osc.garden/count src=https://tabi-stats.osc.garden/count.js></script><script src="https://welpo.github.io/tabi/js/searchElasticlunr.min.js?h=3626c0ef99daa745b31e" defer></script><body><a href=#main-content id=skip-link>Skip to content</a><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/archive/>archive </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/tags/>tags </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/projects/>projects </a><li class=menu-icons-container><ul class=menu-icons-group><li class="js menu-icon"><div aria-label="Click or press $SHORTCUT to open search" class="search-icon interactive-icon" title="Click or press $SHORTCUT to open search" id=search-button role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><li class=language-switcher><details class=dropdown><summary aria-label="Language selection" title="Language selection" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>English<a aria-label=Español href=https://welpo.github.io/tabi/es/blog/custom-font-subset/ lang=es role=menuitem>Español</a><a aria-label=Català href=https://welpo.github.io/tabi/ca/blog/custom-font-subset/ lang=ca role=menuitem>Català</a><a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/custom-font-subset/ lang=ar role=menuitem>العربية</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Toggle dark mode" title="Toggle dark/light mode" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Reset mode to default" class="theme-resetter arrow" title="Reset mode to default" aria-hidden=true role=button tabindex=0></div></ul></ul></div></nav></header><div class=content id=main-content><main><article class=h-entry><h1 class="p-name article-title">Optimise loading times with a custom font subset</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/blog/custom-font-subset/></a><ul class=meta><li><time class=dt-published datetime=2023-04-29>29th Apr 2023</time><li title="482 words"><span aria-hidden=true class=separator>•</span>3 min read<li class=tag><span aria-hidden=true class=separator>•</span>Tags: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/showcase/>showcase</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/tutorial/>tutorial</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2025-01-12>Updated on 12th Jan 2025</time><li><span aria-hidden=true class=separator>•</span><a class=external href=https://github.com/welpo/tabi/commits/main/content/blog/custom-font-subset/index.md>See changes</a></ul><p class=p-summary hidden>Learn how to create a custom subset that only includes the necessary glyphs.<section class="e-content body"><h2 id=the-problem><a aria-label="Anchor link for: the-problem" class="header-anchor no-hover-padding" href=#the-problem><span aria-hidden=true class=link-icon></span></a> The problem</h2><p>Custom fonts cause flashing text in Firefox. For a gif and more details, see <a class=external href=https://github.com/welpo/tabi/issues/75 rel=external>this issue</a>.<h2 id=the-solution><a aria-label="Anchor link for: the-solution" class="header-anchor no-hover-padding" href=#the-solution><span aria-hidden=true class=link-icon></span></a> The solution</h2><p>To fix this, tabi loads a subset of glyphs for the header. Since this (slightly) increases the initial load time, it’s a good idea to try and minimise the size of this subset.<p>By default, there are subset files for English and Spanish characters (with a few symbols). These files are loaded when the Zola page/site is set to that language.<div class="admonition tip"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>TIP</strong><p>If you’re using a custom font, either create your custom subset (see below) or disable the built-in subsets completely with <code>enable_subset = false</code> in your <code>config.toml</code>.</div></div><p>Here’s how you can create a custom font subset that only includes the characters used in your header, for maximum efficiency.<h2 id=requirements><a aria-label="Anchor link for: requirements" class="header-anchor no-hover-padding" href=#requirements><span aria-hidden=true class=link-icon></span></a> Requirements</h2><p>Install these tools:<ul><li><p><a class=external href=https://github.com/fonttools/fonttools rel=external>fonttools</a></p><li><p><a class=external href=https://github.com/google/brotli rel=external>brotli</a></p></ul><p>Run <code>pip install fonttools brotli</code> to install both.<h2 id=the-script><a aria-label="Anchor link for: the-script" class="header-anchor no-hover-padding" href=#the-script><span aria-hidden=true class=link-icon></span></a> The script</h2><p>The script below takes a <code>config.toml</code> file and a font file as input, extracts the necessary characters, creates a subset of the font, and generates a CSS file containing the base64 encoded subset.<pre class="giallo z-code"><code data-lang=shellscript><span class=giallo-l><span class="z-punctuation z-definition z-comment z-shebang z-shell z-meta z-shebang z-shell">#!/usr/bin/env bash</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-entity z-name z-function">usage</span><span class=z-punctuation>() {</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "Usage: </span><span class="z-variable z-parameter">$0</span><span class="z-string z-punctuation z-definition z-string"> [--config | -c CONFIG_FILE] [--font | -f FONT_FILE] [--output | -o OUTPUT_PATH]"</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "Options:"</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> " --config, -c Path to the config.toml file."</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> " --font, -f Path to the font file."</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> " --output, -o Output path for the generated subset.css file (default: current directory)"</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> " --help, -h Show this help message and exit"</span></span>
<span class=giallo-l><span class=z-punctuation>}</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Default output is current directory.</span></span>
<span class=giallo-l><span class=z-source>output_path</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string z-string">"."</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Parse command line options</span></span>
<span class=giallo-l><span class=z-keyword>while</span><span class=z-punctuation> [</span><span class="z-punctuation z-definition z-string"> "</span><span class=z-variable>$#</span><span class="z-punctuation z-definition z-string">"</span><span class="z-keyword z-operator"> -gt</span><span class="z-constant z-numeric"> 0</span><span class=z-punctuation> ];</span><span class=z-keyword> do</span></span>
<span class=giallo-l><span class=z-keyword> case</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-parameter">$1</span><span class="z-punctuation z-definition z-string">"</span><span class=z-keyword> in</span></span>
<span class=giallo-l><span class=z-string> --config</span><span class=z-punctuation>|</span><span class=z-string>-c</span><span class="z-keyword z-operator">)</span></span>
<span class=giallo-l><span class=z-source> config_file</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string">"</span><span class="z-variable z-parameter">$2</span><span class="z-punctuation z-definition z-string">"</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> shift</span><span class="z-constant z-numeric"> 2</span></span>
<span class=giallo-l><span class=z-punctuation> ;;</span></span>
<span class=giallo-l><span class=z-string> --font</span><span class=z-punctuation>|</span><span class=z-string>-f</span><span class="z-keyword z-operator">)</span></span>
<span class=giallo-l><span class=z-source> font_file</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string">"</span><span class="z-variable z-parameter">$2</span><span class="z-punctuation z-definition z-string">"</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> shift</span><span class="z-constant z-numeric"> 2</span></span>
<span class=giallo-l><span class=z-punctuation> ;;</span></span>
<span class=giallo-l><span class=z-string> --output</span><span class=z-punctuation>|</span><span class=z-string>-o</span><span class="z-keyword z-operator">)</span></span>
<span class=giallo-l><span class=z-source> output_path</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string">"</span><span class="z-variable z-parameter">$2</span><span class="z-punctuation z-definition z-string">"</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> shift</span><span class="z-constant z-numeric"> 2</span></span>
<span class=giallo-l><span class=z-punctuation> ;;</span></span>
<span class=giallo-l><span class=z-string> --help</span><span class=z-punctuation>|</span><span class=z-string>-h</span><span class="z-keyword z-operator">)</span></span>
<span class=giallo-l><span class="z-entity z-name z-function"> usage</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> exit</span><span class="z-constant z-numeric"> 0</span></span>
<span class=giallo-l><span class=z-punctuation> ;;</span></span>
<span class=giallo-l><span class="z-keyword z-operator"> *)</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "Unknown option: </span><span class="z-variable z-parameter">$1</span><span class="z-punctuation z-definition z-string">"</span></span>
<span class=giallo-l><span class="z-entity z-name z-function"> usage</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> exit</span><span class="z-constant z-numeric"> 1</span></span>
<span class=giallo-l><span class=z-punctuation> ;;</span></span>
<span class=giallo-l><span class=z-keyword> esac</span></span>
<span class=giallo-l><span class=z-keyword>done</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Check if -c and -f options are provided</span></span>
<span class=giallo-l><span class=z-keyword>if</span><span class=z-punctuation> [</span><span class="z-keyword z-operator"> -z</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$config_file</span><span class="z-punctuation z-definition z-string">"</span><span class=z-punctuation> ];</span><span class=z-keyword> then</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "Error: --config|-c option is required."</span></span>
<span class=giallo-l><span class="z-entity z-name z-function"> usage</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> exit</span><span class="z-constant z-numeric"> 1</span></span>
<span class=giallo-l><span class=z-keyword>fi</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class=z-keyword>if</span><span class=z-punctuation> [</span><span class="z-keyword z-operator"> -z</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$font_file</span><span class="z-punctuation z-definition z-string">"</span><span class=z-punctuation> ];</span><span class=z-keyword> then</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "Error: --font|-f option is required."</span></span>
<span class=giallo-l><span class="z-entity z-name z-function"> usage</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> exit</span><span class="z-constant z-numeric"> 1</span></span>
<span class=giallo-l><span class=z-keyword>fi</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Check if config and font files exist.</span></span>
<span class=giallo-l><span class=z-keyword>if</span><span class=z-punctuation> [</span><span class="z-keyword z-operator"> ! -f</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$config_file</span><span class="z-punctuation z-definition z-string">"</span><span class=z-punctuation> ];</span><span class=z-keyword> then</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "Error: Config file '</span><span class="z-variable z-other z-normal z-shell">$config_file</span><span class="z-string z-punctuation z-definition z-string">' not found."</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> exit</span><span class="z-constant z-numeric"> 1</span></span>
<span class=giallo-l><span class=z-keyword>fi</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class=z-keyword>if</span><span class=z-punctuation> [</span><span class="z-keyword z-operator"> ! -f</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$font_file</span><span class="z-punctuation z-definition z-string">"</span><span class=z-punctuation> ];</span><span class=z-keyword> then</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "Error: Font file '</span><span class="z-variable z-other z-normal z-shell">$font_file</span><span class="z-string z-punctuation z-definition z-string">' not found."</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> exit</span><span class="z-constant z-numeric"> 1</span></span>
<span class=giallo-l><span class=z-keyword>fi</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Extract the title and menu names from the config file.</span></span>
<span class=giallo-l><span class=z-source>title</span><span class="z-keyword z-operator">=</span><span class=z-punctuation>$(</span><span class="z-entity z-name z-function">awk</span><span class="z-string z-punctuation z-definition z-string"> -F' = ' '/^title/{print $2}' "</span><span class="z-variable z-other z-normal z-shell">$config_file</span><span class="z-punctuation z-definition z-string">"</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> tr</span><span class="z-string z-punctuation z-definition z-string"> -d '"'</span><span class=z-punctuation>)</span></span>
<span class=giallo-l><span class=z-source>menu_names</span><span class="z-keyword z-operator">=</span><span class=z-punctuation>$(</span><span class="z-entity z-name z-function">awk</span><span class="z-string z-punctuation z-definition z-string"> -F' = ' '/^menu/{f=1;next} /socials/{f=0} f && /name/{print $2}' "</span><span class="z-variable z-other z-normal z-shell">$config_file</span><span class="z-punctuation z-definition z-string">"</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> cut</span><span class="z-string z-punctuation z-definition z-string"> -d',' -f1</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> tr</span><span class="z-string z-punctuation z-definition z-string"> -d '"'</span><span class=z-punctuation> )</span></span>
<span class=giallo-l><span class=z-source>language_names</span><span class="z-keyword z-operator">=</span><span class=z-punctuation>$(</span><span class="z-entity z-name z-function">awk</span><span class="z-string z-punctuation z-definition z-string"> -F' = ' '/^language_name\./{print $2}' "</span><span class="z-variable z-other z-normal z-shell">$config_file</span><span class="z-punctuation z-definition z-string">"</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> tr</span><span class="z-string z-punctuation z-definition z-string"> -d '"'</span><span class=z-punctuation> )</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># If the site is multilingual, get the menu translations.</span></span>
<span class=giallo-l><span class=z-keyword>if</span><span class=z-punctuation> [</span><span class="z-keyword z-operator"> -n</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$language_names</span><span class="z-punctuation z-definition z-string">"</span><span class=z-punctuation> ];</span><span class=z-keyword> then</span></span>
<span class=giallo-l><span class=z-keyword> for</span><span class=z-source> menu_name</span><span class=z-keyword> in</span><span class="z-punctuation z-definition z-variable z-source"> $menu_names</span><span class=z-punctuation>;</span><span class=z-keyword> do</span></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"> # Find the line with the menu name inside a [languages.*.translations] section and get the translated menus.</span></span>
<span class=giallo-l><span class=z-source> menu_translation</span><span class="z-keyword z-operator">=</span><span class=z-punctuation>$(</span><span class="z-entity z-name z-function">awk</span><span class="z-string z-punctuation z-definition z-string"> -F' = ' "/</span><span class="z-constant z-character z-escape">\\</span><span class=z-string>[languages.*</span><span class="z-constant z-character z-escape">\\</span><span class=z-string>.translations</span><span class="z-constant z-character z-escape">\\</span><span class=z-string>]/{f=1;next} /^</span><span class="z-constant z-character z-escape">\\</span><span class=z-string>[/ {f=0} f && /</span><span class="z-variable z-other z-normal z-shell">$menu_name</span><span class=z-string> =/{print </span><span class="z-constant z-character z-escape">\$</span><span class="z-string z-punctuation z-definition z-string">2}" "</span><span class="z-variable z-other z-normal z-shell">$config_file</span><span class="z-punctuation z-definition z-string">"</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> tr</span><span class="z-string z-punctuation z-definition z-string"> -d '"'</span><span class=z-punctuation> )</span></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"> # Add the found menu value to the translations string</span></span>
<span class=giallo-l><span class=z-source> menu_names</span><span class="z-keyword z-operator">+=</span><span class="z-punctuation z-definition z-string">"</span><span class="z-variable z-other z-normal z-shell">$menu_translation</span><span class="z-punctuation z-definition z-string">"</span></span>
<span class=giallo-l><span class=z-keyword> done</span></span>
<span class=giallo-l><span class=z-keyword>fi</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Combine the extracted strings.</span></span>
<span class=giallo-l><span class=z-source>combined</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string">"</span><span class="z-variable z-other z-normal z-shell">$title$menu_names$language_names</span><span class="z-punctuation z-definition z-string">"</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Get unique characters.</span></span>
<span class=giallo-l><span class=z-source>unique_chars</span><span class="z-keyword z-operator">=</span><span class=z-punctuation>$(</span><span class="z-support z-function z-builtin">echo</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$combined</span><span class="z-punctuation z-definition z-string">"</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> grep</span><span class=z-string> -o .</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> sort</span><span class=z-string> -u</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> tr</span><span class="z-string z-punctuation z-definition z-string"> -d '\n'</span><span class=z-punctuation>)</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Create a temporary file for subset.woff2.</span></span>
<span class=giallo-l><span class=z-source>temp_subset</span><span class="z-keyword z-operator">=</span><span class=z-punctuation>$(</span><span class="z-entity z-name z-function">mktemp</span><span class=z-punctuation>)</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Create the subset.</span></span>
<span class=giallo-l><span class="z-entity z-name z-function">pyftsubset</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$font_file</span><span class="z-punctuation z-definition z-string">"</span><span class="z-constant z-character z-escape"> \</span></span>
<span class=giallo-l><span class="z-string z-punctuation z-definition z-string"> --text="</span><span class="z-variable z-other z-normal z-shell">$unique_chars</span><span class="z-punctuation z-definition z-string">"</span><span class="z-constant z-character z-escape"> \</span></span>
<span class=giallo-l><span class="z-string z-punctuation z-definition z-string"> --layout-features="*" --flavor="woff2" --output-file="</span><span class="z-variable z-other z-normal z-shell">$temp_subset</span><span class="z-punctuation z-definition z-string z-string">" --with-zopfli</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Remove trailing slash from output path, if present.</span></span>
<span class=giallo-l><span class=z-source>output_path</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-variable z-source">${output_path</span><span class="z-keyword z-operator">%/</span><span class="z-punctuation z-definition z-variable">}</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Base64 encode the temporary subset.woff2 file and create the CSS file.</span></span>
<span class=giallo-l><span class=z-source>base64_encoded_font</span><span class="z-keyword z-operator">=</span><span class=z-punctuation>$(</span><span class="z-entity z-name z-function">base64</span><span class="z-string z-punctuation z-definition z-string"> -i "</span><span class="z-variable z-other z-normal z-shell">$temp_subset</span><span class="z-punctuation z-definition z-string">"</span><span class=z-punctuation>)</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin">echo</span><span class="z-punctuation z-definition z-string z-string"> "@font-face{font-family:</span><span class="z-constant z-character z-escape">\"</span><span class=z-string>Inter Subset</span><span class="z-constant z-character z-escape">\"</span><span class=z-string>;src:url(data:application/font-woff2;base64,</span><span class="z-variable z-other z-normal z-shell">$base64_encoded_font</span><span class="z-string z-punctuation z-definition z-string">);}"</span><span class="z-keyword z-operator"> ></span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$output_path</span><span class="z-string z-punctuation z-definition z-string">/custom_subset.css"</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Remove the temporary subset.woff2 file.</span></span>
<span class=giallo-l><span class="z-entity z-name z-function">rm</span><span class="z-punctuation z-definition z-string"> "</span><span class="z-variable z-other z-normal z-shell">$temp_subset</span><span class="z-punctuation z-definition z-string">"</span></span></code></pre><h2 id=usage><a aria-label="Anchor link for: usage" class="header-anchor no-hover-padding" href=#usage><span aria-hidden=true class=link-icon></span></a> Usage</h2><p>Save the script somewhere like <code>~/bin/subset_font</code>. Make it executable with <code>chmod +x ~/bin/subset_font</code>.<p>Now you can run it with the required <code>--config</code> and <code>--font</code> options:<pre class="giallo z-code"><code data-lang=shellscript><span class=giallo-l><span class="z-keyword z-operator">~</span><span class=z-source>/bin/subset_font --config path/to/config.toml --font path/to/font.woff2</span></span></code></pre><p>By default, this generates a <code>custom_subset.css</code> file in the current directory. Use <code>-o</code> or <code>--output</code> to specify a different path:<pre class="giallo z-code"><code data-lang=shellscript><span class=giallo-l><span class="z-keyword z-operator">~</span><span class=z-source>/bin/subset_font -c path/to/config.toml -f path/to/font.woff2 -o path/to/output</span></span></code></pre><p>You should place this <code>custom_subset.css</code> file inside the <code>static/</code> directory.<h2 id=automating-with-pre-commit-hook><a aria-label="Anchor link for: automating-with-pre-commit-hook" class="header-anchor no-hover-padding" href=#automating-with-pre-commit-hook><span aria-hidden=true class=link-icon></span></a> Automating with Pre-commit Hook</h2><p>You might change the title or menu options of your site, making the custom subset no longer useful.<p>To automate the process of creating this file, you can integrate the script into a Git pre-commit hook that checks for changes in the <code>config.toml</code> file, runs the script, and stores the resulting CSS file in the <code>static/</code> directory of your site.<ol><li><p>Create a <code>.git/hooks/pre-commit</code> file in your Git project, if it doesn’t already exist.</p><li><p>Make it executable with <code>chmod +x .git/hooks/pre-commit</code>.</p><li><p>Add the following code to the file:</p></ol><pre class="giallo z-code"><code data-lang=shellscript><span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"># Check if config.toml has been modified.</span></span>
<span class=giallo-l><span class=z-keyword>if</span><span class="z-entity z-name z-function"> git</span><span class=z-string> diff --cached --name-only</span><span class="z-keyword z-operator"> |</span><span class="z-entity z-name z-function"> grep</span><span class="z-string z-punctuation z-definition z-string"> -q "config.toml"</span><span class=z-punctuation>;</span><span class=z-keyword> then</span></span>
<span class=giallo-l><span class="z-support z-function z-builtin"> echo</span><span class="z-punctuation z-definition z-string z-string"> "config.toml modified. Running subset_font…"</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"> # Call the subset_font script.</span></span>
<span class=giallo-l><span class="z-entity z-name z-function"> ~/bin/subset_font</span><span class=z-string> -c config.toml -f static/fonts/Inter4.woff2 -o static/</span></span>
<span class=giallo-l></span>
<span class=giallo-l><span class="z-punctuation z-definition z-comment z-comment"> # Add the generated subset.css file to the commit.</span></span>
<span class=giallo-l><span class="z-entity z-name z-function"> git</span><span class=z-string> add static/custom_subset.css</span></span>
<span class=giallo-l><span class=z-keyword>fi</span></span></code></pre><p>Make sure to modify the script to match the path where you stored the <code>subset_font</code> script. The config and font paths should work fine with tabi’s default setup.<p>Now, every time you commit changes to your Git project, the pre-commit hook will check for modifications in the <code>config.toml</code> file and automatically run the <code>subset_font</code> script to update the <code>custom_subset.css</code> file.<p>By the way, if you’re interested in a way to automatically update the date of your Zola posts or compress your PNG files, check out <a class=external href=https://osc.garden/blog/zola-date-git-hook/ rel=external>this post</a>.<p>If you want to use all scripts at once (compressing PNG files, updating the date, and creating the font subset), combine their code into a single <code>.git/hooks/pre-commit</code> file.</section><form action="https://vhiweeypifbwacashxjz.supabase.co/rest/v1/rpc/increment_hits?apikey=sb_publishable_EoB7MFJhCmb6PiAk-GPJ4w_PGhQ44Ru" class=iine-form method=post><input name=page_slug type=hidden value=/blog/custom-font-subset/><button aria-label="Like this post" title="Like this post" class=iine-button data-icon=thumbs_up data-slug=/blog/custom-font-subset/>👍</button></form><nav class="full-width article-navigation"><div><a aria-describedby=left_title aria-label=Next href=https://welpo.github.io/tabi/blog/comments/><span class=arrow>←</span> Next</a><p aria-hidden=true id=left_title>Add comments to your posts with these 4 comment systems</div><div><a aria-describedby=right_title aria-label=Prev href=https://welpo.github.io/tabi/blog/security/>Prev <span class=arrow>→</span></a><p aria-hidden=true id=right_title>Secure by default</div></nav></article></main><span class=hidden id=copy-success> Copied! </span><span class=hidden id=copy-init> Copy code to clipboard </span><script defer src=https://welpo.github.io/tabi/js/copyCodeToClipboard.min.js></script><script defer src=https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js></script></div><footer><section><nav class="socials nav-navs"><ul><li><a class="nav-links no-hover-padding social" href=https://welpo.github.io/tabi/atom.xml> <img alt=feed loading=lazy src=https://welpo.github.io/tabi/social_icons/rss.svg title=feed> </a><li class=js><a class="nav-links no-hover-padding social" data-encoded-email=dGFiaUBvc2MuZ2FyZGVu href=#><img alt=email loading=lazy src=https://welpo.github.io/tabi/social_icons/email.svg title=email> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://github.com/welpo/> <img alt=github loading=lazy src=https://welpo.github.io/tabi/social_icons/github.svg title=github> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://soundcloud.com/oskerwyld> <img alt=soundcloud loading=lazy src=https://welpo.github.io/tabi/social_icons/soundcloud.svg title=soundcloud> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://instagram.com/oskerwyld> <img alt=instagram loading=lazy src=https://welpo.github.io/tabi/social_icons/instagram.svg title=instagram> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://youtube.com/@oskerwyld> <img alt=youtube loading=lazy src=https://welpo.github.io/tabi/social_icons/youtube.svg title=youtube> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE> <img alt=spotify loading=lazy src=https://welpo.github.io/tabi/social_icons/spotify.svg title=spotify> </a></ul></nav><nav class=nav-navs><small> <ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/about/> about </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/privacy/> privacy policy </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> site statistics </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> sitemap </a></ul> </small></nav><div class=credits><small> Powered by <a href=https://www.getzola.org>Zola</a> & <a href=https://github.com/welpo/tabi>tabi</a> • <a href=https://github.com/welpo/tabi> Site source </a></small></div></section><script async src=https://welpo.github.io/tabi/js/decodeMail.min.js></script><div class="search-modal js" aria-labelledby=modalTitle id=searchModal role=dialog><h1 class=visually-hidden id=modalTitle>Search</h1><div id=modal-content><div id=searchBar><div aria-hidden=true class=search-icon><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><input aria-controls=results-container aria-expanded=false autocomplete=off id=searchInput placeholder=Search… role=combobox spellcheck=false><div class="close-icon interactive-icon" title="Clear search" id=clear-search role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></div></div><div id=results-container><div id=results-info><span id=zero_results> No results</span><span id=one_results> $NUMBER result</span><span id=many_results> $NUMBER results</span><span id=two_results> $NUMBER results</span><span id=few_results> $NUMBER results</span></div><div id=results role=listbox></div></div></div></div></footer>
Reference in a new issue View git blame Copy permalink