So hosten Sie Google Fonts lokal über CSS

Letzte Aktualisierung: März 30, 2020

In dieser schritt-für-schritt Anleitung werde ich Ihnen helfen, Google Fonts lokal über CSS zu hosten und das externe Laden zu verhindern. Auf diese Weise erhalten Sie eine schnellere Website, weniger DNS-Suchvorgänge und weniger HTTP-Anforderungen. So können Sie Ihre Seitenbewertung erhöhen. Durch das lokale Hosten unserer Schriftarten konnten wir 33% unserer Ladezeit für die Seite einnehmen. Aber es gibt auch Nachteile, lesen Sie einfach weiter …

Was sind Google Fonts

Google Fonts wurde ursprünglich im Jahr 2010 als “Google Web Fonts” eingeführt. Eine Google-Schriftart ist eine Web-Schriftart aus … Sie haben es erraten: Google!

Das Open Source Font-Verzeichnis von Google ist mit Abstand das beliebteste Verzeichnis der Welt. Ein kurzer Blick auf die Analyse wird Ihnen den Hut abreißen. Wir haben einen Schnappschuss für Sie gemacht.

Warum sollten Sie Google Fonts verwenden?

Die Auswahl der richtigen Schriftart (Typografie) für Ihre Website ist entscheidend für ein ansprechendes Design. Google Fonts bietet Ihnen eine umfassende Auswahl von 916 verschiedenen Schriftarten. Das sollte Ihnen genugend Auswahl bieten. Die gewählte Schriftart verbessert vorzugsweise die Lesbarkeit und Benutzerfreundlichkeit und ist entscheidend für eine bessere Übermittlung Ihrer Nachricht an Ihre Besucher. Der Nachteil dabei ist jedoch, dass es zu einer Verringerung der Geschwindigkeit der Website kommen kann. Lass uns etwas tiefer tauchen.

Interact better with your guests / employees!
Turn any screen into a dynamic screen with Simplify Screen

Check out Simplify Screen

Die Nachteile von Google Fonts und deren lokalem Hosting

Wie bei jeder anderen Web-Schriftart sind die Schriftarten von Google auf einem Gerät (Computer, Tablet, Telefon usw.) nicht vorinstalliert und müssen vom Browser heruntergeladen werden, bevor sie angezeigt werden. Die von Ihnen verwendete Webschrift ist eine zusätzliche HTTP-Anforderung sowie eine weitere DNS-Suche. Sie werden fonts.googleapis.com sehen, um die CSS-Datei abzurufen, und font.gstatic.com, um diese fonts herunterzuladen. Und jeder Besucher muss diese Dateien beim Laden der Seite herunterladen … Wenn Sie Google Fonts lokal hosten, stammen alle Anforderungen von derselben Domain wie Ihre anderen Assets, und höchstwahrscheinlich benötigen Sie auch diese zusätzliche CSS-Datei nicht.

Das lokale Hosten von Google Fonts bedeutet nicht unbedingt, dass sich Ihre Seitengeschwindigkeit verbessert. Erstens könnten Google Fonts bereits auf dem Computer Ihres Besuchers zwischengespeichert sein, wenn Sie eine andere Webseite zuerst angeschaut haben. Wenn diese andere Seite dieselbe Schriftart wie Sie verwendet, ist sie für den Besucher bereits installiert.

Wenn Sie kein CDN wie Cloudflare oder  KeyCDN verwenden (bitte tun Sie das!), Können Sie am Ende Ihre Website verlangsamen, indem Sie Ihre Schriften lokal hosten. Ein CDN reduziert DNS-Lookups und erhöht die Geschwindigkeit einer Website insgesamt. Es ist entwickeld, all dies zu tun. Und Google, ja es ist Google, tut dies offensichtlich auch. Daher werden ihre Schriftarten relativ schnell geladen, wenn man sie das mit dem Herunterladen von Ressourcen von mittelmäßigen Servern vergleicht. Wir empfehlen, keine lokalen Schriftarten zu hosten, wenn Sie kein CDN verwenden.

Schritt-für-Schritt-Anleitung zum lokal Hosten von Google Fonts

Schritt 0: Lassen Sie uns schnell einen Test durchführen, um zu sehen, wo wir sind

Wir verwenden GT Metrix, um einige Informationen zu erhalten, bevor wir beginnen. OK .. die wichtigen Zahlen für uns hier sind, dass wir 71 Anfrage, 1,56 MB Seitengröße haben und in 3,1 Sekunden voll geladen sind. Das können wir besser. Folgen Sie dem Tutorial unten und sehen Sie, wo es uns hinbringt.

quelle: GT Metrix

Schritt 1: Sehen Sie, welche Schriftarten Sie verwenden

Im selben Leistungsbericht können wir sehen, welche Schriftarten auch tatsächlich geladen werden. Navigieren Sie zur Tab “Wasserfall” und suchen Sie nach “fonts.gstatic.com”. Wenn Sie mit der Maus über die Anforderungen fahren, sehen Sie, dass wir “Lato” als Google-Schriftart verwenden.

Quelle: GT Metrix

Schritt 2: Laden Sie die benötigten Font-Dateien herunter

Wenn Sie zur Google Fonts-Website gehen, können Sie alle gewünschten Schriftarten auswählen und herunterladen. Aber hier kommen sie als .ttf-Datei. Sie benötigen einen Konverter, um eine andere, modernere Komprimierung in .woff und .woff2 zu erhalten. Machen wir es uns doch etwas leichter, oder?

Der beste Weg, um die Google-Schriftarten herunterzuladen, ist die Verwendung des kostenlosen  Google Webfonts Helper. Wählen Sie zuerst die gewünschte Schriftart und dann die gewünschten Stile aus. Für uns ist dies die Schrift ‘Lato’ in den Stilen ‘Regular (400)’ und ‘Bold (700)’. Außerdem brauchen wir beide Zeichensätze ‘Latin’ und ‘Latin-ext’.

Quelle: Google Webfonts Helper

Mit diesem kostenlosen Dienst können Sie die Schriftarten in verschiedenen Dateierweiterungen herunterladen, indem Sie die Option “Bester Support” oder “Moderne Browser” auswählen. Mit ‘Best Support’ erhalten Sie alle Dateitypen, wobei die ‘Modern Browser’-Version diese nur auf die am stärksten komprimierten .woff- und .woff2-Erweiterungen beschränkt. Und diese letzte Option ist das, was wir wollen.

Danach sehen Sie auch, dass Sie automatisch den CSS-Code erhalten, mit dem Sie die Schriftarten aufrufen können. Kopieren Sie das CSS in Ihre Zwischenablage und laden Sie die Schriftdateien herunter.

Quelle: Google Webfonts Helper

Schritt 3: Laden Sie die Schriftdateien auf Ihren Server hoch

Als nächstes nehmen Sie die soeben heruntergeladenen Dateien und laden sie per FTP auf Ihren Server hoch. Wir haben einen neuen Ordner mit dem Namen “fonts” erstellt und die Schriftarten hier hochgeladen.

Schritt 4: Fügen Sie diese Schriftarten Ihrem CSS hinzu

Nachdem alle richtigen Dateien vorhanden sind, müssen Sie über CSS darauf verweisen. In vielen WordPress-Themes können Sie Ihrer Site benutzerdefiniertes CSS hinzufügen. Andernfalls können Sie dies auch in das Child-Theme einfügen. Fügen Sie das zuvor kopierte CSS in Ihr Stylesheet ein.

/* lato-700 - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'),
       url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* lato-regular - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'),
       url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Stellen Sie sicher, dass die Quell-URL korrekt ist. Es sollte auf die Dateien verweisen, die Sie gerade über FTP hochgeladen haben. Wenn Sie ein CDN verwenden, wie wir  KeyCDN verwenden, müssen Sie den Dateipfad ändern, um auf das CDN zu verweisen. Kleiner Hinweis, unsere Uploads über FTP werden automatisch auf unser CDN kopiert.

Ich höre Sie denken, ‘ein CDN ist nicht lokal, oder?’ Soweit Ihre Dateien von einem anderen Server stammen, gelten diese weiterhin als Ihre lokalen Ressourcen. Alle anderen Assets werden bereits vom selben CDN-Server kommen. In diesem Fall können Sie also sicher sagen, dass Sie Google Fonts lokal hosten und alles mit CSS erledigt haben.

Interact better with your guests / employees!
Turn any screen into a dynamic screen with Simplify Screen

Check out Simplify Screen

Last but not least müssen Sie jetzt dieses neue Schriftbild anfordern. Sie können beliebig so viele CSS-Klassen hinzufügen als Sie möchten. Manchmal müssen Sie das CSS Ihrer Seite überprüfen, um festzustellen, welche Classes diese Schriftarten tatsächlich anfordern. Für uns beschränken wir uns auf die folgenden Grundlagen.

body {font-family:'Lato', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6,p,a {font-family:'Lato', Arial, sans-serif;}

Schritt 5: Mal sehen, wo wir sind

Nachdem wir den Schritten gefolgt haben, haben wir unsere Seitenbewertung ziemlich stark erhöht. Wir haben unsere Anfrage um ‘2’ reduziert, 0,34 MB von der Gesamtseitengröße abgezogen und dies alles führte zu einer Reduzierung der Ladezeit um 1 Gesamtsekunde, was einer Verbesserung von 33% entspricht!

quelle: GT Metrix
Quelle: GT Metrix

Entfernen Sie die Meldung “Sicherstellen, dass Text während des Ladens von Webfont sichtbar bleibt”

Während wir dabei sind, könnten wir diese Nachricht genauso gut loswerden. Wenn Sie PageSpeed Insights zum Messen Ihrer Website verwenden, wurde möglicherweise die Anweisung “Sicherstellen, dass Text während des Ladens von Webfont sichtbar bleibt” angezeigt.

quelle: PageSpeed Insights

Lassen Sie uns diese Nachricht loswerden! In Ihrem früheren CSS können wir einfach ‘font-display: swap;’ hinzufügen. und wiederholen Sie dies für alle verwendeten Schriftarten. Der Code sieht folgendermaßen aus:

/* lato-regular - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Lato Regular'), local('Lato-Regular'),
       url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

font-display:swap; Instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.

Fazit

Um Ihre Google Fonts lokal über CSS zu hosten, haben wir die Ladezeit der Seite um 33% und die Seitengröße um 0,34 MB verringert. In einigen Fällen ist dies definitiv der richtige Weg. Für uns ist das eine große Steigerung. Aber lasst uns fair sein, wir haben bereits mit einer ziemlich schnellen Seite angefangen.

Wenn Ihre Website noch viel langsamer ist, ist es mein Rat, andere Dinge zuerst zu optimieren, je nachdem, was Ihre Analyse aussagt.

Und wie gesagt, das Ganze macht auch nur Sinn, wenn Sie auch einen CDN verwenden. Hier bei Simplify Everything verwenden wir sowohl schnelle Hosting als auch ein CDN, für unsere Seiten. Vielleicht sollten Sie sich unser Portfolio ansehen, um zu sehen, was wir für Sie tun können.

Raymond Hollaar

Raymond is a Dutch guy with Hungarian roots, living in Austria. Can you still follow? Apart from loving the outdoor life in the mountains, he spends most of his time indoors playing with computers. He has over 10 years of experience with the design of websites and especially with e-Commerce.

Other posts by the author:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

You need to have accepted our cookies before being able to submit this form. If you have not already done so, please click here.

Diese Website ist geschützt durch reCAPTCHA und es gelten Google's Datenschutzbestimmungen und die Nutzungsbedingungen.