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.
