Wilhei Typen

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äßt 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 Wunderschoene Ueberschrift

Größenvergleich der verschiedenen Dateien
TrueType Woff Woff2 Woff2 PNG
Eigenschaften ohne Subsetting ohne Subsetting ohne Subsetting mit Subsetting
  • in Wörter aufgeteilt
  • transparent
  • optimiert
  • acht farbige Palette
CSS text-shadow text-shadow text-shadow text-shadow filter: drop-shadow()
Dateigröße 230 kB 96 kB 78 kB 7,8 kB 6,2 kB
  • Wird mehr Text verwendet, steigt die Gesamtgröße der Grafik(en) extrem an.
  • Durch den Einsatz von Grafik verzichtet man auf eine freie Skalierbarkeit der Schrift. Dies ist vor allem beim Vergrößern sichtbar.
  • Um einen Zeilenumbruch. beim Verkleinern des Fensters, zu erreichen, muss die Grafik in Wörter zerteilt werden.
  • Ebenso ist eine automatische Silbentrennung mit Grafiken nicht möglich.
Eine
Schrift um 200% vergrößert
Eine
Grafik um 200% vergrößert

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 ursrpü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
Da hier nur wenig verschiedene Zeichen verwendet wurden ist die Datei entsprechend klein geworden.
Anstatt 230 kB ist die entstandene Datei nur noch 7.8 kB gross. Wesentlich kleiner geht es auch mit einer Grafik nicht.

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.
Bei Verwendung der einzelnen Zeichen von Font Awesome ist evtl. noch eine Anpassung von CSS font-family und CSS-font-weight nötig ("Font Awesome 6 Free Brands" usw.).
Bei der direkten Verwendung der Font Awesome CSS–Klassen ist dies nicht notwendig.

.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 entstanden 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äßt sich vereinheitlichen in dem man dem eigentlichen Zeichen den Unicode-Variantenselektoren 15 (U+FE0E: Text-Style) folgen läßt, dann sieht das gewählte Zeichen überall gleich aus und läßt 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 Style-Sheets.

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';
  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.

Wakamai Fondue - Zeichensatz
Auf dieser Website verwendete Font Awesome 6 Free Bold Zeichen
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


  • Bei allen Schriften ist auf die Lizenz zu achten, ob eine Veränderung der Dateien erlaubt ist.
  • Einbindung von externen Schriften ist oft kritisch [1] [3]. Diese besser immer selbst hosten.

Falls Sie nicht alle Zeichen einer Schrift verwenden, können Sie mit den beiden Tools die Größe von Schrift-Dateien und damit die Menge der übertragenenen Daten erheblich reduzieren.
Dadurch wird Ihre Seite schneller geladen.

Mehr zum Thema

Software

Weiterführende Informationen

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

font.png Fleur De Leah       
ttf, woff und woff2    Download
 02.07.2022  269.74 KB  SIL Open Font License link_extern.gif   Robert Leuschke    27


Titel-Bild von Willi Heidelbach auf Pixabay