So laden Sie Google-Schriftarten lokal in WordPress: Ein Optimierungselement, das in GTmetrix, Pingdom und Google PageSpeed ​​Insights enthalten ist

Wenn Ihre WordPress-Site hat Google Font Fehler bei GTmetrix/.Pingdom, Das lokale Laden von Google Fonts sollte diese beheben.


Sie können einige externe Ressourcen und Skripte nicht steuern, sodass sie nicht komprimiert, minimiert oder optimiert werden können. Dies kann Ihre WordPress-Geschwindigkeit ernsthaft beeinträchtigen. Eine der häufigsten externen Ressourcen sind Google Fonts. Wenn Sie bereits ein Cache-Plugin wie WP Rocket oder WP Fastest Cache konfiguriert haben, werden Sie möglicherweise externe Ressourcen wie Schriftarten bemerken, die sich auf Noten + Ladezeiten auswirken. Hier kommt das lokale Laden von Google Fonts ins Spiel. Auf diese Weise kann Ihr Cache-Plugin alle Ressourcen komprimieren, die sich auf Ihre benutzerdefinierten Schriftarten beziehen..

Erstellen Sie eine vollständige Sicherung Ihrer Website (oder zumindest der Dateien, die Sie bearbeiten), bevor Sie Änderungen vornehmen.

Google-Fonts-GTmetrix

Schritt 1: Wählen Sie eine Google-Schriftart

In diesem Beispiel werden wir verwenden Roboto-Schriftart mit zwei Schriftstärken: normal (400) und fett (700).

Google-Fonts-Auswahl

Verwenden Sie weniger Google-Schriftarten – Halten Sie Ihre Google-Schriftarten auf ein Minimum (weniger Schriftarten = weniger Anfragen).

Seien Sie selektiv mit Schriftgewichten – Die Anzahl der Gewichte beeinflusst auch die Ladezeiten. Wenn Sie nur die fett gedruckte Version benötigen, deaktivieren Sie die anderen Gewichte, damit Google Fonts nur die benötigten Gewichte lädt.

Schritt 2: Laden Sie die Schriftart herunter

Laden Sie die Schriftarten herunter, wenn Sie bereit sind. Google lädt automatisch alle Schriftstärken herunter, sodass die Auswahl der Schriftstärken in diesem Schritt nicht erforderlich ist und stattdessen in Schritt 3 erforderlich ist.

Google-Fonts-Download

Schritt 3: Konvertieren von Schriftarten in Web-Schriftarten

Als Nächstes konvertieren wir diese Schriftdateien (.ttf) in Web-Schriftdateien. Ich werde verwenden Transfonter. Gehen Sie zu ihrer Website, klicken Sie auf Schriftarten hinzufügen, dann Laden Sie nur die Schriftarten hoch, die Sie auf Ihrer Website verwenden. Ich benutze Roboto-Regular.ttf und Roboto-Bold.ttf Ich habe also sowohl normale als auch kühne Gewichte. Behalten Sie die Standardeinstellungen bei, da WOFF und WOFF2 alle gängigen Browser abdecken. Klicken Sie nun auf Konvertieren.

Transfonter-Google-Font-Konvertierung

Wählen Sie nur die Schriftarten aus, die Sie auf Ihrer Website verwenden möchten.

Google-Fonts-Conversion-Auswahl

Schritt 4: Laden Sie konvertierte Schriftdateien herunter

Sobald die Schriftarten konvertiert sind, können Sie sie herunterladen. In der Zip-Datei enthält jede Schriftart die Formate WOFF und WOFF2 (da wir 2 Schriftarten heruntergeladen haben, haben wir insgesamt 4 Schriftdateien)..

WOFF-Google-Font-Konvertierung

Schritt 5: Laden Sie Schriftdateien in WordPress-Dateien hoch

Laden Sie die Web-Font-Dateien über FTP oder cPanel hoch, idealerweise in der wp-content / uploads Ordner, damit das Thema und die Kernaktualisierungen sie nicht überschreiben. Ich habe einen Ordner “Schriftarten” erstellt und dort hochgeladen (um sie von anderen Dateien zu trennen). Um zu bestätigen, dass sie erfolgreich hochgeladen wurden und Sie die richtigen Links haben, öffnen Sie die Links in Ihrem Browser und die Schriftarten sollten mit dem Download beginnen.

Beispiel:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

Ersetzen yourwebsite.com mit Ihrer eigenen Website (und HTTPS bei Verwendung von SSL). Testen Sie im Idealfall alle 4 Links und stellen Sie sicher, dass die URLs korrekt sind (und speichern Sie sie auch irgendwo)..

Schritt 6: Hinzufügen einer benutzerdefinierten Schriftart zu CSS

Als nächstes fügen wir das CSS hinzu, das Sie in der heruntergeladenen Zip-Datei mit dem Namen erhalten haben stylesheet.css. Dies ist der CSS-Code, der Ihre Schriftarten mit Ihrem vorhandenen CSS verbindet und sie einsatzbereit macht.

Wo der CSS-Code platziert werden soll, ist subjektiv. Sie können jedoch ein externes Stylesheet oder WordPress verwenden. wp_enqueue_style Funktion in functions.php oder am Anfang Ihres style.css Datei (oder Benutzerdefinierte CSS wenn du eine hast). Ich werde es in die Standarddatei style.css des Themas einfügen. Kopieren Sie den Code, fügen Sie ihn in das Stylesheet ein und ändern Sie alle relativen URLs in absolute URLs.

Standard-URLs in stylesheet.css:
src: url (‘Roboto-Bold.woff2’) Format (‘woff2’),
URL-Format (‘Roboto-Bold.woff’) (‘woff’);

Ändern Sie diese in:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2 ‘) Format (‘ woff2 ‘),
url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘) Format (‘ woff ‘);

Fügen Sie einfach die Ordner-URL vor dem Dateinamen der Schriftart ein.

Dies ist optional. Wenn Sie dies bevorzugen, erstellen Sie eine benutzerdefinierte Klasse, um die Schriftart problemlos in vorhandenem HTML zu verwenden. Hier haben wir unsere Klassen benannt roboto_font und roboto_bold_font. Fügen Sie dazu Ihre Datei style.css hinzu (nach dem obigen Code):

.roboto_font {

Schriftfamilie: “Roboto”, “Arial”, serifenlos;

}}

.roboto_bold_font {

Schriftfamilie: “Roboto”, “Arial”, serifenlos;

Schriftdicke: fett;

}}

Schritt 7: Testen Sie die Schriftart

Erstellen Sie nun eine Testseite und platzieren Sie den folgenden Code in der Texteditor

Testen

Benutzerdefinierter Schrifttest

Benutzerdefinierter Schrifttest

Google-Fonts-Testing

Vorschau der Seite. Wenn Sie es richtig gemacht haben, sollten Sie die neue benutzerdefinierte Schriftart sehen! Die erste Überschrift ist die Standardschriftart Ihrer Website, die zweite und dritte sind die von uns hinzugefügten Google Fonts-Schriftarten:

Lokale Google-Schriftarten

Schritt 8: Legen Sie die Standardschriftart fest

Fügen Sie dieses CSS zu Ihrer style.css-Datei hinzu, um dies zur Standardschriftart Ihrer Website zu machen:

Körper {

Schriftfamilie: “Roboto”, “Arial”, serifenlos;

}}

Achtung! Wenn Sie bereits über eine benutzerdefinierte Schriftart verfügen, wird diese möglicherweise nicht korrekt angezeigt und erfordert das Debuggen oder Bearbeiten vorhandener Eigenschaften der Schriftfamilie und deren Ersetzung durch diese.

Schritt 9: Haben Sie immer Font Fallbacks

Es ist eine schlechte Praxis, eine Google-Schriftart als Schriftfamilie anzuwenden. Stattdessen sollten mehrere Schriftarten angegeben werden, einschließlich der gängigen Schriftarten wie Arial und Times New Roman, damit der Browser auf diese Schriftarten zurückgreifen kann, falls die Schrift nicht geladen wird oder das Laden länger dauert.

Ohne Fallback:
Schriftfamilie: ‘Roboto’;

Mit Fallback-Schriftart:
Schriftfamilie: ‘Roboto’, Arial, serifenlos;;

Falls Ihre Google-Schriftarten nicht geladen werden können, greift der Browser auf die Arial-Schriftart oder den standardmäßigen serifenlosen Schrifttyp des Systems zurück und verursacht keine Probleme beim Rendern der Schriftarten.

Testen Sie Ihre Website erneut (in GTmetrix)

Es sollten keine Google Fonts-Fehler darin angezeigt werden.

New-GTmetrix-Report.png

Habe Fragen? Schreib mir eine Nachricht.

Häufig gestellte Fragen

&# x2705; Wie beschleunigen Sie Google Fonts??

Durch das Kombinieren von Google Fonts, das lokale Hosten und das Vorverbinden und Vorbereiten können Sie die Ladezeiten verbessern. Überprüfen Sie Ihren GTmetrix-Wasserfall, um einen Benchmark Ihrer Schriftarten zu erhalten, und testen Sie ihn nach der Optimierung erneut.

&# x2705; So konvertieren Sie Schriftarten in die Webschriftarten?

Wir verwenden Transfonter.

&# x2705; Was ist mit benutzerdefinierten Elementor-Schriftarten??

Benutzerdefinierte Elementor-Schriftarten können Google Fonts auch lokal hosten und sind in Elementor Pro integriert. Sie können dies verwenden, um Ihre Schriftdateien hochzuladen.

&# x2705; Welche Plugins helfen bei der Optimierung von Schriftarten??

Mit WP Rocket, OMGF, Autoptimize und Perfmatters können Sie Schriftarten optimieren.

&# x2705; Was ist mit dem Vorabrufen und Vorverbinden von Schriftarten??

Diese können Schriftarten beschleunigen, indem sie den Browsern helfen, sie besser zu antizipieren. Wir verwenden das Perfmatters-Plugin von Kinsta, um Schriftarten vorab abzurufen und zu verbinden. Sie können jedoch auch WP Rocket oder das Pre-Party Resource Hints-Plugin verwenden.

Prost,
Usama

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map