Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

Mehrere Google Fonts in einer Zeile zusammenfassen und einbinden

Mehrere Google Fonts mit nur einer Zeile laden

Webfonts performant nutzen

Webfonts sind heutzutage ein großes Thema geworden, denn dank Subsetter und anderer Tools lassen diese sich sogar schon so anpassen, dass sie in Sachen Performance kaum noch echte Nachteile mitbringen und nur die Buchstaben und Zeichen integrieren, die die eigene Website auch wirklich benötigt. Das bedeutet im Umkehrschluss natürlich auch, dass niemand mehr Ausreden hat langweilige Standard-Fonts zu benutzen, es sei denn natürlich genau das ist seine Absicht. Trotzdem: Eigentlich sind Webfonts heute überall verfügbar und echte Nachteile entstehen durch sie auch nicht mehr. Google Fonts ist hier ganz weit vorne, denn natürlich hat Google sehr früh ein entsprechende Angebot gestartet, komplett kostenlos versteht sich. Inwieweit die Anfragen der Fonts noch weitere Daten preisgeben, dazu gibt es viele Gerüchte, doch um den Datenschutz und Google geht es hier ja nicht. Hier geht es darum, wie ihr Google Fonts performant und so minimal wie möglich einbinden könnt, ohne für jede Font einen neue Anfrage und URL generieren zu müssen. Die Kombination macht es möglich.

Mehrere Google Fonts zusammenfassen

Eingefügt werden die Google Fonts am besten direkt im Header und so positioniert, dass andere wichtige Tags keinen Nachteil erhalten bzw. verzögert geladen werden. Oft werden für Überschriften und Inhalte allerdings verschiedene Fonts benutzt, was den Header kräftig füllt, weil gleich zwei, manchmal sogar mehrere Zeilen hinzukommen, die dann jeweils nur eine Webfont einbinden, dafür aber mehrere Anfragen erzeugen. Ungefähr so sieht das dann aus, wenn zwei Google Fonts eingebunden werden.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,900,700' rel='stylesheet' type='text/css'>

Genau diese zwei Zeilen lassen sich aber auch kinderleicht zu einer einzigen zusammenfassen. Als Trenner wird dafür “|” genutzt, welches im Code anzeigt, dass eine weitere Font hinzugefügt wurde. Aus den zwei Zeilen oben wird so ganz einfach eine einzige. Das ganze sieht dann so aus:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300|Roboto:400,900,700' rel='stylesheet' type='text/css'>

Wer jetzt noch spezielle Subsets festlegen möchte, kann natürlich auch diese Einstellungen problemlos und schnell übernehmen. Dafür einfach den Code oben noch einmal anpassen. So sieht der Code am Ende dann aus:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,greek|Roboto:400,900,700&subset=latin' rel='stylesheet' type='text/css'>

Webfonts nutzen, aber richtig

Alles in allem lassen sich die Google Fonts so noch deutlich effektiver laden, weil weniger Anfragen generiert bzw. abgearbeitet werden müssen. Ein Link also, der gleich mehrere Fonts auf die Website bringt und dann auch deutlich schneller Ergebnisse liefert. Gerade bei den Webfonts ist es ja wichtig, dass keine Verzögerung entsteht, weil die Fonts sonst nachgeladen werden müssen, was wiederum einen negativen Nachladeeffekt mit sich bringt, der eine Website optisch herunterzieht und den Eindruck vermittelt als sei die zugrundeliegende Technik nicht optimiert. Davon abgesehen gilt bei Webfonts, dass diese gezielt gecached, minimiert und komprimiert werden sollte. Ein paar Tipps zum Einbinden von Webfonts hatte ich bereits neulich zusammengefasst.



Wordpress Performance eBook