Google Fonts mit WebFont Loader laden

Um eine Webseite zu individualisieren gehört eine „besondere“ Schriftart zwangsläufig auch dazu. Dabei wird man wohl nicht an Google Fonts vorbei kommen. Nun bietet Google Fonts mehrere Möglichkeiten an, um Schriftarten einzubinden.

Standard

@IMPORT

Um die Schriftart anzuwenden muss man dann nur noch folgenden Code in die Styles packen.

Alles gut und schön und funktioniert auch super. Doch wenn man dann die Webseite fertiggestellt hat und kurz vor der Kundenübergabe steht und den Pagespeed über die Seite laufen lässt, dann wird einem vom Google darauf hingewiesen, dass die Google Schriftart das Rendern der Seite verlangsamt. Da fragt man sich doch – Wieso bietet Google nicht gleich eine Ladefreundliche Variante an?

Google Fonts mit WebFont Loader in die Webseite einbinden

Damit die Seite in den Pagespeed Punkten wieder steigt müssen die Schriftarten also über WebFont Loader von Google geladen werden. Der Codeschnipsel dazu ist auch sehr einfach zu benutzen, nur frage ich mich, wieso Google Fonts die WebFont Loader Variante nicht automatisch anbietet.

Kopiert einfach den folgenden Code in Euren Header oder Footer. Ihr könnt auch mehrere Fonts mit einem Komma separiert eingeben.

Bedenkt aber: Je mehr Schriftarten, dazu zählen auch die Unterschiedlichen Breiten, desto langsamer wird die Seite.