Webfont Optimierung durch Subsetting

Nicht immer werden alle Zeichen einer Schriftart verwendet

Mit den Programmen glyphhanger und fontTools kann man die benötigten Zeichen zusammenfassen. Dadurch werden Sie auf Ihren Websites Übertragungsvolumen sparen und damit die Ladezeit der Seiten verkürzen.

Dieses Font Subsetting erreicht man einfach mit diesen beiden Programmen.
Mit dem glyphhanger finden Sie heraus, welche Zeichen verwendet werden und mit den fonttools erstellen Sie eine neue passende Schriftdatei, die nur die Zeichen enthält, die Sie auch verwenden.

Am sinnvollsten ist dies bei Schriftarten (oder Schriftschnitten), die Sie z. B. nur für eine Überschrift(en) verwenden, oder bei Schriften mit sehr vielen Zeichen, wovon Sie z. B. nur die europäischen verwenden.
Auch die Größe von Icon–Fonts wie z. B. Font Awesome lässt sich dadurch erheblich reduzieren.

Subsets bieten auch Dienste wie Google–Fonts an. In Hinblick auf die DSGVO sollten diese Schriften dann selbst gehostet werden ^[1] [3].

Warum nicht gleich eine Grafik als Überschrift verwenden?

Größen–Vergleich von Schrift–Formaten, mit und ohne Subsetting, und dem Text als PNG–Grafik.

Zwischen den Schriften gibt es rein optisch keine Unterschiede, daher sind diese nur einmal dargestellt.

Beispiel als Schrift

Eine wunderschöne Überschrift

Beispiel als Grafik

Eine

Installation

Ich verwende hier die beiden Programme unter Linux.

$ pip install fonttools zopfli brotli

$ npm install -g glyphhanger

Kein Python oder Nodejs?

Sollten die obigen Installationen, wegen fehlender Pakete nicht funktionieren, diese einfach installieren.

Im Falle von pip (Paketverwaltungsprogramm für Python–Pakete):

$ apt install python3-pip

Im Falle von npm (Paketmanager für die JavaScript–Laufzeitumgebung node.js):

$ apt install -y nodejs
$ apt install npm

Einfachste Anwendung

Zuerst mit dem glyphhanger die verwendeten Zeichen ermitteln.
In diesem Fall direkt von einer Webseite unter Angabe der Font-Family. Die ermittelten Zeichen werden in der Datei glyphs.txt gespeichert.

$ glyphhanger https://www.thorsten-willert.de/optimierung/webseitenoptimierung/font-subsetting-mit-glyphhanger-und-fonttools \
--family='FleurDeLeah_ttf' > glyphs.txt

Ergebnis in der glyphs.txt:

U+20,U+45,U+62-66,U+68,U+69,U+6E,U+72-75,U+77,U+DC,U+F6

Mit pyftsubset der fontTools erstellen Sie nun aus der ursprünglichen Schriftdatei ein entsprechendes Subset.
Dieses enthält nur noch die Zeichen, die in der Datei glyphs.txt stehen.

$ pyftsubset FleurDeLeah-Regular.ttf \
--unicodes-file=glyphs.txt \
--flavor=woff2 \
--with-zopfli

Verwendung mit Icon-Fonts

Wer nicht alle Zeichen z. B. aus Font Awesome benötigt, für den gibt es folgende Möglichkeit.
Zuerst die gesamte Seite mit glyphhanger crawlen:

$ glyphhanger https://www.example.org/ --spider --spider-limits=5 --family='Font Awesome 6 Free' > Glyphs_FA_Free.txt
$ glyphhanger https://www.example.org/ --spider --spider-limits=5 --family='Font Awesome 6 Free Regular' > Glyphs_FA_Regular.txt
$ glyphhanger https://www.example.org/ --spider --spider-limits=5 --family='Font Awesome 6 Free Brands' > Glyphs_FA_Brands.txt

Als Ergebnis erhält man Listen aller verwendeten Icons.
Danach ist das weitere Vorgehen wie bei den vorherigen Beispielen.

.myClass {
  content: "\f35d";
  /* Die Auswahl der font-family Browser-Abhängig */
  font-family: "Font Awesome 6 Free Solid", "Font Awesome 6 Free";
  font-weight: 900;
}

Wichtig ist hier die Angabe von font-weight, da sonst die Darstellung in manchen Browsern nicht korrekt erfolgt.

Bei manchen Templates kann es noch erforderlich sein, einzelne Zeichen direkt in die entstandenen Listen mit aufzunehmen, da diese glyphhanger nicht findet, z. B. wenn diese über CSS eingefügt werden.

Alternative: Unicode

Reicht es evtl. anstatt einer Icon-Schrift die benötigten Sonderzeichen aus den vorhandenen Schriften zu verwenden?

Eine schöne Übersicht bietet die Seite Unicode-Table, oder auch auf Unicode.org, hier sieht man auch sofort die Darstellung im Browser. Wenn ein Zeichen in FireFox noch schön bunt war, ist es in Edge plötzlich farblos.

Die Darstellung lässt sich vereinheitlichen in dem man dem eigentlichen Zeichen den Unicode-Variantenselektoren 15 (U+FE0E: Text-Style) folgen lässt, dann sieht das gewählte Zeichen überall gleich aus und lässt sich mit der Text-Farbe gestalten: . Das Beispiel hier ist noch mit einem Farb-Gradienten verschönert.

Das Kleeblatt aus der Überschrift wäre anzugeben im Text-Style: ☘︎ ☘︎ und im Emoji-Style ☘️ ☘️.

Weitere Beispiele mit fertigen Stylesheets.

Weitere Verwendung mit @font-face

Des Weiteren kann das Ergebnis von glyphhanger in CSS mit @font-face verwendet werden.
Aus dem vorherigen Beispiel heraus:

@font-face {
  font-family: 'FleurDeLeah_Subset';
  src: url('FleurDeLeah-Regular.subset.woff2') format('woff2'),
  unicode-range: U+20,U+45,U+62-66,U+68,U+69,U+6E,U+72-75,U+77,U+DC,U+F6;
}

Der Wert gibt den Bereich der Unicode-Zeichen an, die die Schriftart unterstützt. Der Standardwert ist U + 0-10FFFF und optional.

Test der erzeugten Schriftdatei

Auf die Webseite Wakamai Fondue lässt sich die entstandene Schriftdatei hochladen. Hier sehen Sie u. a. den Namen der Schrift (für CSS font-family) und welche Zeichen darin vorhanden sind.

Von den 1954 Zeichen der Font Awesome 6 Free Bold werden nur 39 verwendet.

Das bedeutet für die Größe der Datei:
Anstatt 150.61 kB werden nur noch 3.91 kB heruntergeladen.

Zusammenfassung

Mehr zum Thema

Software

• glyphhanger
• fontTools
• Wakamai Fondue: Übersicht über eine Schrift und alle enthaltenen Zeichen. Schön zum schnellen Testen des Subsettings.
• Font Awesome
• Beispielschrift: Fleur De Leah (Designed by Robert Leuschke )
• google-webfonts-helper

Weiterführende Informationen

• Websites und ihr CO₂-Fußabdruck.
• Unicode-Table
• Unicode.org

Rechtliche Informationen

1. Dejure.org: Urteil zur Nutzung von Google Fonts / LG München I, 20.01.2022 - 3 O 17493/20,
2. jsDelivr-Blog: Auswirkungen des Urteils des LG München auf jsDelivr
3. eRecht24: Datenschutzerklärung für Font Awesome

Downloads

---

Titel-Bild von Willi Heidelbach auf Pixabay

---