Google Fonts lokal auf dem Webserver verwenden

Jedes Mal, wenn eine WordPress Website aufgerufen wird, wird die Schriftart (Fonts) von einem Google Server nachgeladen. Da die Google Server sehr schnell sind, merken wir meistens nichts davon. Dabei wird immer die IP-Adresse des Besuchers an Google übermittelt. Wenn man jetzt die IP-Adresse nicht an Google übergeben will und zusätzlich noch die Geschwindigkeit erhöhen (es kann vorkommen, dass es langsamer wird) möchte, dann sollte man die Schriften direkt auf dem Webserver installieren.

Ich habe diesen Beitrag zwar als “wie man Google Fonts lokal in WordPress hostet” bezeichnet, aber die manuelle Methode, die ich Ihnen zeige, funktioniert eigentlich mit jeder Schriftart, ist also keineswegs nur auf Google Fonts beschränkt. Ganz unten habe ich auch noch eine simple Methode.

Neben dieser manuellen Methode werde ich auch ein Plugin vorstellen, das es einfacher macht, Google Fonts lokal zu hosten (funktioniert aber nur mit Google Fonts, nicht mit anderen Schriftarten).

Warum sollte man sich überhaupt die Mühe machen, Fonts lokal zu hosten?

Ich glaube nicht, dass die meisten Websites ihre Schriftarten lokal hosten müssen. Aber für einige Websites ist es eine gute Option.

Zunächst einmal eröffnet das lokale Hosting von Schriftarten die ganze Welt der Schriftarten im Web. Sie können jede Schriftart verwenden, die Sie finden und für die Sie die Rechte besitzen. Und das ist ziemlich cool!

Darüber hinaus kann das lokale Hosten von Schriftarten zu einem Leistungsschub führen, da Sie externe Anfragen an den Server, auf dem Ihre Schriftarten gehostet werden, vermeiden können. Sie können beispielsweise die externe Anfrage an die Google-Server für eine Schriftart im Pingdom Tools-Wasserfall auf meiner Testseite sehen:

Das bedeutet natürlich nicht, dass das lokale Hosten von Schriftarten die Ladezeit Ihrer Website immer beschleunigt.

Wenn es um Google Fonts geht, sind die Server von Google bereits ziemlich schnell und Google Fonts hat sein eigenes CDN, um schnelle globale Ladezeiten zu gewährleisten. Außerdem ist es möglich, dass der Browser eines Nutzers die Schriftart bereits im Cache gespeichert hat, insbesondere wenn Sie eine beliebte Schriftart wie Lato oder Roboto verwenden.

Grundsätzlich würde ich Ihnen raten, Ihre Website vorher und nachher zu testen, um sicherzustellen, dass das lokale Hosten Ihrer Schriftarten Ihre Website tatsächlich beschleunigt.

Wie man Google Fonts lokal in WordPress hostet: Die manuelle Methode

Gut, jetzt kommen wir zum praktischen Teil und ich zeige Ihnen, wie Sie Google Fonts lokal in WordPress hosten können.

Denken Sie daran – auch wenn ich Google Fonts als Beispiel verwende, funktioniert diese manuelle Methode auch mit jeder anderen Schriftart.

Step 1: Download der Font Dateien

Zunächst müssen Sie die Schriftartdatei herunterladen, die Sie verwenden möchten.

Bei Google Fonts können Sie auf den Link Diese Schriftart auswählen klicken. Klicken Sie dann auf die Schaltfläche Herunterladen:

Wenn Sie auf die Schaltfläche “Herunterladen” klicken, erhalten Sie von Google Fonts eine ZIP-Datei mit den verschiedenen Schriftschnitten der Schrift.

Ich empfehle jedoch, nur die Mindestanzahl der benötigten Schriftschnitte zu wählen – verwenden Sie nicht jeden einzelnen Schnitt. Ein guter Stapel besteht aus je einer Schriftart von:

• Regular
• Italic
• Bold

Entpacken Sie die Datei und löschen Sie alle Schriftarten, die Sie nicht verwenden möchten:

Schritt 2: In das WOFF-Format konvertieren (falls erforderlich)

Wenn Sie eine Schrift von Google Fonts herunterladen, erhalten Sie die Schrift im TTF-Format. Um die Kompatibilität mit anderen Browsern zu gewährleisten, empfehlen die meisten Quellen, die ich gelesen habe, die Verwendung der Formate WOFF oder WOFF 2.0.

Wenn die von Ihnen gewählte Schriftart also nicht in diesem Format vorliegt, können Sie sie mit dem kostenlosen Tool Convertio in das WOFF-Format konvertieren.

Schritt 3: Schriftdateien auf den Server hochladen

Als Nächstes laden Sie die Schriftdateien mit FTP oder Total Commander auf Ihren Server hoch. Wenn Sie nicht wissen, wie Sie sich per FTP mit Ihrem Server verbinden, lesen Sie unsere Anleitung zur Verwendung von FTP auf WordPress.

Damit Ihre Schriftdateien leicht zu finden sind, können Sie sie in einem Ordner namens fonts ablegen. Für dieses Beispiel habe ich den Ordner fonts im Stammverzeichnis meiner Website angelegt. Wie das aussieht, sehen Sie auf dem Screenshot unten:

Step 4: Add CSS For Font Face

Sobald Sie die Schriftartendateien auf Ihren Server hochgeladen haben, müssen Sie diese Schriftarten mithilfe von @font-face in das CSS Ihrer Website einbinden.

Dazu können Sie entweder die Registerkarte Zusätzliches CSS im WordPress Customizer verwenden. Oder Sie können ein Plugin wie Simple CSS von Tom Usborne verwenden, was ich für diese Screenshots tun werde.

Sobald Sie sich für eine Methode zum Hinzufügen von benutzerdefiniertem CSS entschieden haben, finden Sie hier das genaue CSS, das Sie benötigen:

@font-face {
font-family: 'roboto-regular';
src: url('https://zhwyland.ch/fonts/Robot-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Natürlich muss das für jede Schriftart dieser Eintrag angepasst werden.

Schritt 5: CSS für die Verwendung der Schriftart hinzufügen

Jetzt muss WordPress noch beibringen, die Schriften in WordPress auch zu verwenden!

Wenn man zum Beispiel für den gesamten Text die Schriftart Roboto Regular verwenden möchte, kann folgendes CSS verwendent werden:

body {font-family: 'roboto-regular', Arial, sans-serif;}

Man kann dieses CSS an der gleichen Stelle einfügen, an der CSS-Code aus Schritt 4 hinzugefügt wurde.

Im folgenden Gif Bild sieht man den Unterschied vorher – nachher

Schritt 6: Goggle Fonts stoppen in WordPress #

Sollte Ihre Website immer noch Schriften vom Google-Fonts-Server laden, könnte das daran liegen, dass Ihr Theme annimmt, dass es immer noch die auf den Google-Fonts-Servern gehosteten Schriftarten verwenden muss. Um dies zu verhindern, können Sie Ihr Theme so einstellen, dass es einen System-Schriftartenstapel verwendet (falls verfügbar).

Um ohne Programmierkenntnisse das Resultat zu erreichen, nimmt man das Disable Googel Fonts Plugin, welches Open Source ist.

Wem das ganze zu kompliziert ist, verwendet das Optimize My Google Fonts Plugin.

Natürlich sollte man vorher eine Sicherung erstellen oder es lokal auf dem Computer teste. Dazu kann man die Software von DevKinsta verwenden, welches mit Docker auf dem lokalen Computer installiert wird. Um die lokale Website auf den Webserver zu transferieren, benutze ich WPvivid, welches für 14 Tage gratis benutzt werden kann. Andere Plugins findet man auf Google.

Weitere Informationen findet man bei blogmojo, welcher das Thema noch vertieft.