Die verschiedenen Methoden, um Web-Fonts einzubinden
Web-Fonts, insbesondere Icon-Web-Fonts sind eine einfache Art, Webseiten optisch aufzuwerten. Doch leider haben Web-Fonts auch Ihren Preis. Sie müssen geladen werden und dies kann die Performance einer Webseite signifikant beeinflussen.
Signifikant beeinflussen, dass bedeutet evtl. ein zusätzlicher Request und natürlich zusätzliches Ladevolumen. Darüber hinaus kann das Laden der Fonts auch das Laden der restlichen Skripte blockieren oder zu einem Flackern führen (FOUT-Effekt), da evtl. zuerst Standardschriftarten als Ersatz geladen werden, bis endlich der richtige Web-Font verfügbar ist.
Es gibt verschiedene Möglichkeiten, Web-Fonts zu laden, wobei jede Methode Ihre Vor- und Nachteile hat. Diese Pro und Contras möchte ich kurz zusammenfassen.
Laden der Web-Fonts über CDN
Pro:
- kein Blockieren der weiteren Ladevorgänge
Contra:
- Abhängigkeit von Dritten (CDN)
- zusätzlicher Request
- größeres Ladevolumen, da meist mehr Font-Elemente geladen werden, als eigentlich notwendig sind
- FOUT-Effekt
Laden der Web-Fonts innerhalb einer CSS-Datei
Pro:
- Keine Abhängigkeit von Dritten (CDN)
Contra:
- zusätzlicher Request
- Blockieren der weiteren Ladevorgänge
- FOUT-Effekt
Laden der Web-Fonts innerhalb einer CSS-Datei (base64 codiert)
Pro:
- Kein zusätzlicher Request
- Kein Blockieren der weiteren Ladevorgänge
- Keine Abhängigkeit von Dritten (CDN)
- Fonts sofort verfügbar (kein FOUT-Effekt)
Contra:
- größere CSS-Datei, d.h. mehr Ladevolumen
- nur für kleine Font-Dateien sinnvoll
- Ältere Browser unterstützen keine base64-codierten Fonts
Laden der Web-Fonts inline (base64 codiert)
Pro:
- Kein zusätzlicher Request
- Kein Blockieren der weiteren Ladevorgänge
- Keine Abhängigkeit von Dritten (CDN)
- Fonts sofort verfügbar (kein FOUT-Effekt)
Contra:
- Quellcode wird aufgebläht (Verhältnis Quellcode vs. Content verschlechtert sich)
- Font wird bei jedem Aufruf geladen
- Ältere Browser unterstützen keine base64-codierten Fonts
Laden der Webfonts asyncron über einen Fontloader
Pro:
- Kein Blockieren der weiteren Ladevorgänge
- Keine Abhängigkeit von Dritten (CDN)
Contra:
- Javascript-Abhängigkeit
- FOUT-Effekt
- zwei zusätzliche Requests
Laden der Webfonts aus dem LocalStorage
Pro:
- ab dem zweiten Aufruf kein zus. Request notwendig
- Keine Abhängigkeit von Dritten (CDN)
- Kein FOUT-Effekt (außer beim ersten Laden)
- Kein Blockieren der weiteren Ladevorgänge
Contra:
- Javascript-Abhängigkeit
- das erstmalige Laden in den LocalStorage erhöht die Ladezeit
- Fallback für alte Browser muss implementiert werden
Fazit
Es ist schwer, eine abschließende Empfehlung zu geben, denn je nach Anwendungsfall hat die eine oder andere Methode ihre Vor- bzw. Nachteile. Generell würde ich Methoden bevorzugen, die keinen zusätzlichen Request erfordern. Je nach Größe der Font-Dateien würde ich für TTF und WOFF-Fonts die base64-Codierung in Erwägung ziehen. Dies allerdings nicht inline, sondern in einer bereits vorhandenen CSS-Datei.