At first glance, without looking too much at the size of font files, adding those fonts to a website seems like a completely natural thing to do. This might be so, because nowadays a fast internet connection is something we take for granted. We don't even notice that visiting basically any popular news site will download at least several megabytes of data. In places, where the author did not optimize font files, the additional several hundred kilobytes of transfer will probably go unnoticed anyway. However, in contrast to larger sites, smaller ones like this one, often require less than a dozen kilobytes to download. Attaching font files that hugely exceed the weight of the page itself doesn't make a lot of sense. On the other hand, we would like our small part of the internet to be as we envisaged it. Relinquishing from nice additions, like elegant typography (this is of course a matter of subjective taste), is not an option.

Apart from standard symbols used in the Polish and English alphabets, font files often contain much more information. For example, all Greek letters, the whole Russian alphabet¹ and some typesetting functions (in the appropriate font formats like OpenType²). Even if any of those additional elements won't be used on the site, the complete font file must be downloaded to the user's device. A comparison of the size of this webpage with the size of the original font files is presented below.

-rw-rw-r-- 484K 09-05 11:04 EBGaramond12-Regular.otf
-rw-rw-r-- 130K 09-14 11:44 FiraCode-Retina.otf
-rw-rw-r-- 7,1K 09-24 19:57 optymalizacja_rozmiaru_czcionek.html

The webpage file size, including all links and headers, is almost 70 times smaller than the EB Garamond font used on the site.

Iused several open-source tools to optimize the font files. With FontForge, we can easily determine which glyphs and typesetting features the selected font is equipped with. Additionally, each character group has the Unicode range printed next to it (this will be useful later). A bit more user friedly program (in my opinion) is Wakamai Fondue. This web application has one very handy feature—it will generate a web page using the font of our choosing. Such page contains chapters rendered with each typesetting option contained in the font, for example, with ligatures [liga dlig], kerning [kern], or with special versions of certain glyphs [onum subs]³.

Lets assume that the following Unicode ranges are what we need.

U+0000-007F # Podstawowy łaciński.
U+0080-00FF # Dodatkowy łaciński 1. Umlauty, trochę symboli.
U+0100-017F # Rozszerzony łaciński A. Polskie symbole.
U+0370-03FF # Grecki.
U+2000-206F # Interpunkcja.
U+2070-209F # Indeksy.
U+2150-218F # Formy liczbowe, np. rzymskie.
U+2190-21FF # Strzałki.
U+221E      # Symbol nieskończoności.
U+2600-26FF # Symbole.
U+E001-E002 # Symbole "listka".

The unicodes.txt file with ranges from the list above (available in basic, presented above and extended version with different Unicode ranges) will be used with the fonttools, a Python tool for manipulating font files. As our goal is to produce the smallest possible file, we will also need brotli⁴, a library utilized in creation of font files in the WOFF2 format. After we decide which font functions we want to preserve and choose the font output format, the only thing left to do is to run the following command (ideally, from a separate virtual environment with brotli and fonttools installed):

pyftsubset EBGaramond12-Regular.otf
 --output-file=EBGaramond12-Regular.woff2
 --unicodes-file=unicodes.txt
 --flavor=woff2
 --layout-features+=sups,cv02,cv06,cv90,onum,smcp,numr,subs

By removing the redundant characters and typesetting functions, we can substantially reduce the size of a font file. In case of the EB Garamond font, the optimized version of the file is about 90% smaller thant the original font.

-rw-rw-r-- 57K 09-05 11:04 EBGaramond12-Regular.woff2
-rw-rw-r-- 22K 09-14 11:44 FiraCode-Retina.woff2
-rw-rw-r-- 7,1K 09-24 19:57 optymalizacja_rozmiaru_czcionek.html