Pagespeed

Webfonts/Schriftarten asynchron laden

Webfonts werden im Normalfall direkt in dem HEAD-Bereich des Quellcodes einer Webseite geladen. Der Code dafür sieht in etwa wie folgt aus:

<link rel='stylesheet' id='redux-google-fonts-mom_options-css' href='http://fonts.googleapis.com/css?family=Exo+2' type='text/css' media='all'/>

In diesem Beispiel wird die Schriftart Exo 2 als Webfont geladen.

Webfonts asynchron laden
Google selbst bietet Euch einen Web Font Loader an, mit dem Ihr Google-Schriftarten asynchron laden könnt. Dies bietet Euch einige Vorteil hinsichtlich der Ladezeit der Webseite.

Der Code für die Beispielschriftart Exo+2 sieht dann wie folgt aus:

<script async type="text/javascript">
WebFontConfig = {
google: { families: [ 'Exo+2' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>

Webfonts vor dem /BODY-Tag laden
Wer keinen zusätzlichen JavaScript-Code in seiner Webseite einfügen möchte, der kann den Webfontscode auch direkt von dem abschließenden /BODY-Tag laden lassen.
Probiert es auch, eventuell funktioniert es bei Eurem verwendeten CMS problemlos.

1 Star2 Stars3 Stars4 Stars5 Stars (Noch keine Bewertung)
Loading...

Kommentar verfassen