Webfonts sind nach wie vor ein heißes Thema. Jeder will sie nutzen, weil sie in den meisten Fällen toll aussehen. Dabei ist aber Vorsicht geboten, da sie in der Regel sehr große Datenmengen mit sich bringen und wenn man sie nicht richtig läd das komplette Rendering der Seite aufhalten und damit unter Umständen den Content für mehrere Sekunden unnötigerweise ausblenden.
Wenn ihr zum Beispiel eine Google Webfont ganz normal per @import oder einem Standard <link> Element einbindet, werden die Schriften synchron geladen. Das bedeutet, dass sie alles blocken was danach kommt. Das ist schlecht:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600|Raleway:400,700' rel='stylesheet' type='text/css'>Besser ist es Webfonts asynchron zu laden so dass der Inhalt mit einer Fallback Schrift angezeigt wird bis die Webfont geladen wurde. Das hat den Vorteil, dass der Content so früh wie möglich sichtbar ist und das auch mit einer schlechten Verbindung. Außerdem blockt das Laden der Schriften auch sonst keine weiteren Vorgänge des Browsers.
Web Font Loader
Mit dem Typekit Web Font Loader lassen sich Webfonts asynchron laden. Aber eben nicht nur Schriften von Typekit sondern eben auch von anderen Diensten wie zum Beispiel von der kostenlosen Google Webfont Library.
Dafür benötigen wir folgenden Code im <head> Bereich:
<script>
var WebFontConfig = {
google: {
families: [ 'Open+Sans:400,600,400italic', 'Raleway:700' ]
},
timeout: 3000
};
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];;
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
wf.async = 'true';
s.parentNode.insertBefore(wf, s);
})(document);
</script>In var WebFontConfig geben wir an von welchem Font Service wir die Schriften laden wollen und welche es sein sollen. In diesem Fall laden wir Open Sans mit font-weight 400, 600 und die 400er noch in kursiv. Außerdem laden wir auch noch Raleway in fett.
Wir nutzen außerdem noch die Option timeout: 3000. Das bedeutet, dass das Laden abgebrochen wird wenn nach 3 Sekunden nicht alles geladen wurde. Das hat den Vorteil, dass eine ohnehin sehr schwache Verbindung nicht weiter belastet wird nur um eine vermeintlich schönere Schrift zu laden. Wichtiger in so einem Szenario ist, dass die wirklich wichtigen Ressourcen geladen werden.
Dann müssen wir noch das eigentliche webfontloader script laden. Dazu wird ein <script> Element mit der src
https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.jserzeugt. Wir geben dem <script> Element außerdem das nötige async Attribut mit.
Jetzt werden die Schriften asynchron geladen und blocken keine weiteren Vorgänge.
Der Web Font Loader fügt dem <html> Element diverse Klassen hinzu. So z.B. .wf-active sobald alle Schriften komplett geladen sind. Es gibt auch noch weitere während des Ladevorgangs und pro Schrift eigene Klassen. Aber wir konzentrieren uns jetzt nur mal auf die generelle .wf-active Klasse.
Das ermoglicht uns folgendes CSS zu schreiben:
html {
font-family: Arial, Verdana, sans-serif;
}
h1 {
font-family: Georgia, serif;
}
html.wf-active {
font-family: 'Open Sans', Arial, Verdana, sans-serif;
}
.wf-active h1 {
font-family: 'Raleway', Georgia, serif;
}Wir definieren zuerst die Standard Schriften und sobald alle Webfonts geladen sind nutzen wir diese. Das führt zwar zu einem minimalem FOUT (Flash of unstyled text), also es wird zuerst die Fallbackschrift angezeigt und dann gibt es ein minimales Aufblitzen wenn die neue Schrift angezeigt wird. Wenn man aber etwas acht darauf gibt, dass sich Fallbackschrift und finale Webfont nicht zu sehr unterscheiden und auch in Größe und Zeilenhöhe passen, dann ist es kaum merkbar und die Geschwindigkeits- und Benutzerfreundlichkeitsvorteile überwiegen hier deutlich.
Der Web Font Loader bringt noch etwaige weitere Optionen und Events mit sich. Wenn ihr mehr erfahren wollt, schaut doch mal auf GitHub ins Repository.
