Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 3. Juli 2019

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.

Webschriften optimieren

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.

Anzeige

fontsquirrel_webfont-generator
Webfont-Generator von Fontsquirrel

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.

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.

unicode-range_beispiel
Verwendung der „Lobster“ für den Unicode-Bereich „U+0026“ (kaufmännisches Und)

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)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

8 Kommentare

  1. Vielen Dank für diesen sehr guten Beitrag über Schriften!

  2. Werden eigentlich alle möglichen Formate, die in der CSS hinterlegt sind, geladen oder holt sich der Browser nur eine einzige Schriftdatei? Also beispielsweise nur WOFF2, wenn der Browser dieses Format unterstützt?

  3. Wie ist es mit der Lizensierung von Schriften, die ich selbst in WOFF/WOFF2 umwandle? Ich denke mal, eine normale Lizenz bildet diese Nutzung nicht ab und das kann Ärger geben …

    • Da muss man sich natürlich die jeweiligen Lizenzbedingungen anschauen. Aber bei MyFonts erworbene Webschriften lassen sich mittlerweile auch als WOFF2 herunterladen.

  4. WOFF-Dateien sind bereits komprimiert, daher ist eine serverseitige Komprimierung kontraproduktiv und führt eher zu längerer Ladezeit.

  5. Wenn ich eine Schriftart in der CSS hinterlege, dann werden in dieser mehrere Dateiformate hinterlegt. Also wenn ich die Schriftart beispielsweise über den im Artikel erwähnten Generator Erstelle.
    Holt sich der Browser dann eigentlich immer nur eine Datei bzw. ein Dateiformat (zum Beispiel nur WOFF) oder werden alle in der CSS für die Schriftart hinterlegten Dateien geladen?

  6. Besten Dank für den Beitrag,
    hier noch eine hilfreiche Ergänzung für alle, die gerne bis ins letzte Detail optimieren.
    Wer einen sehr umfangreichen Schriftsatz verwendet und sich sicher ist, dass bestimmte Zeichen nicht benötigt werden, kann die Schrift mit dem FF Subsetter etwas „schrumpfen“.

    http://www.subsetter.com/

    Gruß
    Mirco

  7. Für mich ist das Thema im Moment von grossem Interesse. Vielen Dank!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.