Using web fonts can have a big impact on the performance of your website. Subsetting fonts helps to improve it. This is also relevant for the environmental impact websites have.
Good fonts support more than just ASCII characters that are used for english texts. A lot of western languages use accents. Also many languages are not based on the latin alphabet, so many fonts also support, for example, greek and/or cyrillic characters.
Using the full font most probably means that you are loading unused characters. Font files can be as large as 300 KB. If you also use different styles (regular, bold, italic) or different weights, you quickly load up to 1 MB of fonts. And this is multiplied, if you use more than 1 font. A subsetted font is around 20-30 KB for western languages, so this results in a huge saving.
In the past, I often used the google-webfonts-helper to download a latin-1
subset of Google Fonts. Until I discovered that some common characters are not part of latin-1
character set. These included the Euro sign (€), quotes (‘ ’ ‚ “ ” „), dashes (– —) or the ellipsis (…).
Also, if the font I wanted or needed to use, wasn’t available as a Google Font, I had to convert it myself.
Subsetting is also very useful if you only need a narrow set of characters. For example if you use a icon font and only use some of the icons. Or if you only want digits, which I needed for creating SVG images on the SVG Placeholder website.
Custom subsetted fonts need to be self-hosted. Self-hosting web fonts is better for performance anyway, because you save DNS requests, SSL negotiations, and HTTP connections. Also using multiple domains is considered to be an anti-pattern with HTTP/2. It also improves privacy and can save you from fines in Germany.
A while ago, I started subsetting fonts on the command line with fontTools.
If you prefer a graphical interface, you can try the Font Squirrel Webfont Generator.
With static site generators you could integrate subfont into your build process.
Required tools
fontTools is a Python library, so you will need to have Python installed.
Windows
For installing (and updating) command line tools, I like to use Scoop. Alternatively you can install Python with Chocolatey or the official Python installer.
scoop install python
pip install fonttools
MacOS
Make sure you already have Homebrew installed.
brew install fonttools
Linux
Your Linux distribution probably has fonttools already pre-packaged. So use the default package manager to install it.
If not, you will have to install it with PIP. You also need to have support for compression with Brotli and Zopfli in Python installed.
pip install fonttools
Subsetting
To subset a font you have to use thepyftsubset
command to create Web Open Font Format (WOFF) fonts in version 1 and 2.
pyftsubset font.ttf --flavor=woff --output-file="font.woff" --with-zopfli --unicodes="U+0020-007F,U+00A0-00FF,U+20AC,U+2010,U+2013,U+2014,U+2018,U+2019,U+201A,U+201C,U+201D,U+201E,U+2039,U+203A,U+2026,U+2022"
pyftsubset font.ttf --flavor=woff2 --output-file="font.woff2" --unicodes="U+0020-007F,U+00A0-00FF,U+20AC,U+2010,U+2013,U+2014,U+2018,U+2019,U+201A,U+201C,U+201D,U+201E,U+2039,U+203A,U+2026,U+2022"
If you are using variable fonts, you only have to use the woff2 format. Browsers that don’t support woff2, also don’t support variable fonts.
Below is a table explaining the character ranges that I used. You can adapt them to your own needs.
Character(s) | Unicode (range) |
---|---|
Basic Latin | U+0020-007F |
Latin-1 Supplement | U+00A0-00FF |
Euro sign | U+20AC |
Hyphen | U+2010 |
En dash | U+2013 |
Em dash | U+2014 |
Left quote | U+2018 |
Right quote | U+2019 |
Single low quote | U+201A |
Left double quote | U+201C |
Right double quote | U+201D |
Double low quote | U+201E |
Bullit | U+2022 |
Ellipsis | U+2026 |
Single left pointing angle | U+2039 |
Single right pointing angle | U+203A |
More information on Unicode characters can be found on the following pages:
CSS
In your stylesheets you now can use the subsetted font. The woff2 font should be listed before the woff font. That way the woff2 will be loaded, if the browser supports it. Older browsers will load the woff format.
To ensure the correct characters are used, you should declare the unicode-range
.
@font-face {
font-display: swap;
font-family: "Font Name";
font-style: normal;
font-weight: 400;
src: url('subsetted-font.woff2') format('woff2'),
url('subsetted-font.woff') format('woff');
unicode-range: U+0020-007F,U+00A0-00FF,U+20AC,U+2010,U+2013,U+2014,U+2018,U+2019,U+201A,U+201C,U+201D,U+201E,U+2039,U+203A,U+2026,U+2022;
}
Nowadays you can probably just use woff2 only, because all current browsers have support for WOFF 2.0.
For better performance you should add font-display: swap
. This causes a flash of unstyled content (FOUC) on inital page load. If you prefer, you can use font-display: optional
instead. In this case you get invisible text on initial load, but falls back to the default font, if downloading the web fonts takes too long. Without font-display
you will get blank text, until the web fonts have finished downloading.
For variable fonts you only have to use woff2 fonts. You should add woff2 supports variations
and woff2-variations
format declarations for better browser compatibility.
@font-face {
font-display: swap;
font-family: "Variable Font Name";
src: url(subsetted-variable-font.woff2) format("woff2 supports variations"),
url(subsetted-variable-font.woff2) format("woff2-variations");
unicode-range: U+0020-007F,U+00A0-00FF,U+20AC,U+2010,U+2013,U+2014,U+2018,U+2019,U+201A,U+201C,U+201D,U+201E,U+2039,U+203A,U+2026,U+2022;
}