Mehrere Webfont Subsets verwenden
In früheren Beiträgen habe ich dir gezeigt, wie Font Subsetting mit Glyphhanger funktioniert. Da die Inhalte der meisten Websites jedoch dynamisch sind, lässt sich oftmals nicht genau sagen, welche Zeichen einer Webfont benötigt werden. Dem lässt sich entgegen wirken, indem Unicode Blöcke als Subsets verwendet werden. Aber auch dann kann es noch vorkommen, dass eine Webfont nicht immer alle Zeichen beinhaltet die benötigt werden. Dies ist vor allem dann der Fall, wenn Inhalte in mehreren Sprachen dargestellt werden müssen. Eine Lösung für dieses Problem kann es sein, mehrere Subsets einer Font zu verwenden und den Browser die Subsets laden zu lasen, die benötigt werden. Wie genau das funktioniert zeige ich dir in diesem Beitrag.
Mehrere Unicode Blöcke manuell einbinden
Unicode Blöcke habe ich in meinem ersten Beitrag zum Thema Font Subsetting bereits angesprochen. Es handelt sich dabei um zusammengehörende Blöcke von Zeichen die einem unter anderem dabei helfen, zu definieren welche Zeichnen einer Font benötigt werden. Für deutsche Texte benötigt man in der Regel die Blöcke Basic Latin sowie Latin-1 Supplement, welche zusammen die Zeichen mit den Bytecodes von 0000 bis 00FF enthalten. Für griechische Texte wiederum wird der Block Greek and Coptic benötigt, der die Zeichen von 0370 bis 03FF enthält.
Wenn wir also Inhalte in mehreren Sprachen darstellen wollen, dann summiert sich die Anzahl Zeichen die benötigt werden sehr schnell. Da wir in der Regel nicht mehrere Sprachen auf der gleichen Seite verwenden, sondern viel wahrscheinlicher eine Seite mit deutschem Inhalt und eine separate Seite mit griechischem Inhalt erstellen, können wir zwei verschiedene Subsets einer Font erstellen und jeweils das korrekte Subset laden.
Doch selbst wenn wir dies so machen entstehen zwei Probleme. Einerseits ist es aufwendig und fehleranfällig wenn wir das korrekte Subset auf jeder Seite manuell einbinden müssen. Andererseits wird es, selbst wenn wir die Inhalte nach Sprachen trennen, teilweise zu Überschneidungen der verschiedenen Subsets kommen. Auch dies können wir lösen, indem wir die Überschneidungen entweder in mehrere Subsets packen oder eben mehrere Subsets pro Seite laden. Beide Ansätze führen aber zu noch mehr Aufwand und Fehlerpotenzial.
Den Browser entscheiden lassen
Wäre es nicht toll wenn wir dem Browser sagen könnten welche Subsets existieren und er selber entscheidet, welche er laden muss? Genau das können wir. Beim definieren einer Webfont mit dem @font-face Keyword können wir definieren, welche Unicode Range in einer Font enthalten ist. Das sieht dann so aus:
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 300;
src: url('ubuntu.woff2') format('woff2');
unicode-range: U+0000-00FF;
}
Mit unicode-range geben wir an, welche Zeichen in der Font enthalten sind. Wir sind dabei nicht auf eine Unicode Range eingeschränkt, sondern können mehrere oder auch einzelne Zeichen angeben. Anstatt U+0000-00FF könnten wir also auch U+0000-007F, U+0080-00FF angeben. Durch die Angabe der Unicode Range können wir nun mehrere @font-face Blöcke für die gleiche Font mit unterschiedlichen Unicode Ranges definieren:
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 300;
src: url('ubuntu.woff2') format('woff2');
unicode-range: U+0000-00FF;
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 300;
src: url('ubuntu-greek.woff2') format('woff2');
unicode-range: U+0370-03FF;
}
Damit sagen wir dem Browser welche Subsets wir zur Verfügung stellen. Dieser entscheidet dann basierend auf dem Inhalt selbst, welche Subsets geladen werden. Dies funktioniert in allen modernen Browsern.
Fazit
Mit Webfont Subsets und der Möglichkeit, über die Angabe der Unicode Range den Browser entscheiden zu lassen welche Subsets geladen werden müssen, haben wir alles was wir benötigen um dem Benutzer nur die Zeichen einer Webfont auszuliefern, die er auch wirklich benötigt. Da Webfonts sehr schnell sehr gross werden können, kann dies einen enormen Einfluss auf die Geschwindigkeit einer Webseite haben. Ich kann dir also nur empfehlen dieses Feature zu nutzen.
