Performance: So optimierst du Schriften für deine Website

Webschriften sind eine große Bereicherung für das Webdesign. In ambitionierteren Projekten geht es kaum mehr ohne. Schließlich haben sie die Einheitstypografie mit Verdana und ihren Zeitgenossen beendet. Da Webschriften im Gegensatz zu Systemschriften jedoch heruntergeladen werden müssen, stellen sie natürlich eine zusätzliche Ressource dar, die für zusätzlichen Datentransfer sorgt. Mit den folgenden Tipps optimierst du deine Webschriften und sorgst so dafür, dass sie schneller geladen werden.

Anzeige

Zeichensatz der Schrift beschränken

Gut ausgebaute Schriften besitzen schon mal mehrere hundert Zeichen. Darin enthalten sind dann etwa sprachspezifische Buchstaben wie deutsche Umlaute und das Eszett – aber auch solche anderer Sprachen. Falls du auf deiner Website ohnehin nur Texte in deutscher Sprache veröffentlichst, solltest du dich auf einen Zeichensatz konzentrieren, der auf alle nicht benötigten Buchstaben verzichtet.

Nutzt du eine Schrift nur in Versalien – zum Beispiel für Überschriften – solltest du Kleinbuchstaben aus dem Zeichensatz streichen. So kommst du zu möglichst kleinen Dateigrößen. Denn gerade im mobilen Internet solltest du auf möglichst kleine Dateigrößen achten.

Die meisten Anbieter von Webschriften wie beispielsweise MyFonts bieten einen Webfont-Generator an, mit dem du den Zeichensatz selbst bestimmen kannst. Darin legst du dann beispielsweise fest, welche Sprachen unterstützt werden sollen. Einen frei zugänglichen Webfont-Generator gibt es zudem auf Fontsquirrel. Dort lädst du eine Desktopschrift hoch und generierst die passenden Webschriften in allen gängigen Formaten.

Auch wenn nach wie vor eine Reihe unterschiedlicher Webformate wie EOT und TTF im Einsatz sind, so hat sich das WOFF-Format doch mittlerweile als Standard durchgesetzt. Mit WOFF2 gibt es dazu bereits ein Nachfolgeformat, welches deutlich kleinere Schriftdateien hervorbringt. Du solltest also neben WOFF auch WOFF2 berücksichtigen. Die Browser, die das neue Format bereits unterstützen, können so kleinere Dateien herunterladen.

Webfont-Generatoren wie der von Fontsquirrel unterstützen dieses Format bereits.

Anzeige

Zeichensatz per CSS beschränken

Moderne Browser unterstützen noch eine weitere Möglichkeit, den Zeichensatz einer Schriftdatei einzuschränken – nämlich die CSS-Eigenschaft „unicode-range“. Hiermit definierst du einzelne Zeichen oder Zeichenbereiche einer Schrift. Der Browser lädt dann nur jene Zeichen der Schrift herunter, die innerhalb des vorgegebenen Unicode-Bereiches liegen.

unicode-range: U+0025-00FF;
unicode-range: U+4??;
unicode-range: U+0025-00FF, U+4??;

Im ersten Beispiel wird ein Unicode-Bereich definiert, der die Codepunkte „U+0025“ bis „U+00FF“ beinhaltet. Im zweiten Beispiel wird eine Wildcard gesetzt. Es werden also alle Zeichen berücksichtigt, deren Codepunkte mit „U+4“ beginnen. Im letzten Beispiel werden die ersten beiden Bereiche miteinander kombiniert.

Leider unterstützen noch nicht alle Browser diese Eigenschaft. Der Internet Explorer und Edge stellen im Browser zwar nur jene Zeichen dar, die im angegebenen Unicode-Bereich liegen, laden aber dennoch den kompletten Zeichensatz herunter.

Schriften komprimieren und cachen

Zuguter letzt besteht serverseitig noch die Möglichkeit, eine Schrift zu komprimieren. Per „.htaccess“ sorgt du beispielsweise dafür, die Schriftdateien per Deflate zu schrumpfen, bevor sie an den Browser geschickt werden. So reduzierst du die Dateigröße während der Übertragung, was die zu übertragene Datenmenge wieder etwas schmälert.

Außerdem solltest du per „.htaccess“ dafür sorgen, dass deine Schriftdateien im Browser zwischengespeichert werden. In der Regel treten ja keine Veränderungen bei Schriftdateien auf, sodass ein durchaus großzügig angelegter Zeitraum für das Caching eingerichtet werden kann.

AddType font/woff .woff
ExpiresByType font/woff "access plus 1 year"
AddOutputFilterByType DEFLATE font/woff

Im Beispiel wird per „ExpiresByType“ dafür gesorgt, dass die Schrift ein Jahr lang im Cache verbleibt und per „AddOutputFilterByType“ wird zusätzlich die Deflate-Komprimierung angewendet.

(Beitragsbild: Gerd Altmann/Pixabay)