Na pierwszy rzut oka, bez przyglądania się rozmiarowi plików czcionek, dołączanie dodatkowych fontów do strony internetowej wydaje się zupełnie naturalnym rozwiązaniem. Być może dlatego, że dostęp do szybkiego internetu bierzemy za coś zupełnie oczywistego i nawet nie zwracamy uwagi na fakt, że otworzenie pierwszej z brzegu popularnej strony z wiadomościami wymaga przesłania kilku, lub nawet kilkunastu megabajtów danych. Tam, gdzie autor strony nie pokusił się o optymalizację czcionek, dodatkowy transfer kilkuset kilobajtów pozostanie zapewne tak czy inaczej niezauważony. Jednak w odróżnieniu od dużych stron te mniejsze, jak chociażby ta, często nie przekraczają kilkunastu kilobajtów. Dołączanie do nich plików czcionek o rozmiarze wielokrotnie większym niż objętość strony nie ma większego sensu. Z drugiej strony chcielibyśmy, aby nasz kawałek internetu wyglądał tak, jak sobie to wymyśliliśmy i nie chcemy rezygnować z dodatków w postaci eleganckiej (subiektywnie oczywiście) typografii.

Pliki czcionek, oprócz podstawowych symboli wykorzystywanych w języku polskim i angielskim, najczęściej zawierają o wiele więcej informacji. Na przykład znaki alfabetu greckiego oraz cały alfabet grażdanki¹, a także funkcje zecerskie (dla odpowiednich formatów czcionek, na przykład OpenType²). Mimo tego, że żaden z tych dodatkowych elementów może nie być użyty na stronie, cała czcionka musi zostać przesłana na urządzenie użytkownika. Porównanie rozmiaru tej strony i oryginalnych czcionek wygląda następująco.

-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

Rozmiar pliku strony, razem z nagłówkami i wszystkimi odnośnikami jest blisko 70 razy mniejszy niż rozmiar czcionki EB Garamond, wykorzystanej na tej stronie.

D o optymalizacji czcionek wykorzystałem kilka narzędzi open‑source. FontForge pozwala sprawdzić, jakie znaki oraz właściwości zecerskie posiada font. Dodatkowo, każdy zestaw znaków opisany jest zakresem symboli Unicode. Nieco bardziej przyjazną użytkownikowi (w mojej ocenie) aplikacją jest Wakamai Fondue. Wyjątkowo przydatną cechą tego programu jest generowanie strony internetowej, zbudowanej w wybranym przez nas foncie. Taka strona zawiera rozdziały renderowane z wykorzystaniem dostępnych parametrów czcionki, np. ligaturami [liga dlig], kerningiem [kern] lub też specjalnymi wersjami symboli [onum subs]³.

Załóżmy, że potrzebne będą wymienione poniżej zakresy znaków:

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".

Tak sformatowany plik unicodes.txt (dostępny jest plik podstawowy, w wersji z artykułu oraz rozszerzony, różniące się zakresami symboli Unicode) wykorzystamy w fonttools, pythonowym narzędziu do manipulacji czcionek. Zależy nam na jak najmiejszym rozmiarze pliku, więc potrzebna będzie także biblioteka brotli⁴, stosowana do tworzenia plików czcionek w formacie WOFF2. Gdy już zdecydujemy, które cechy fontu chcemy zachować, oraz jaki format wyjściowy czcionki chcemy uzyskać, wystarczy uruchomić następujące polecenie (najlepiej z osobnego środowiska wirtualnego, w którym zinstalowaliśmy brotli oraz fonttools):

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

Usuwając niepotrzebne znaki oraz funkcje fontu, możemy znacznie zredukować rozmiar pliku. W przypadku czcionki EB Garamond to prawie 90%.

-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