Sie befinden sich hier:
» 
» 
24.03.2015

Die verschiedenen Methoden, um Web-Fonts einzubinden

Kategorie(n): HTML und CSS Tipps

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.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

87