Es ist einfach, Google Fonts in WordPress zu verwenden. Es handelt sich um ein kostenloses Verzeichnis mit über 800 Web-Schriftarten, die Sie auf Ihrer Website verwenden können. Der Google Fonts-Dienst ist ein erstklassiger kostenloser Dienst, der von Millionen von WordPress-Websites verwendet wird, um das Erscheinungsbild und die Benutzerfreundlichkeit ihrer Website zu verbessern. Hier erfahren Sie, wie Sie Google-Schriftarten in WordPress verwenden, ohne die Leistung der Website zu beeinträchtigen und Ihren PageSpeed- Score zu verbessern.
Methode 1: Hosten Sie Google Fonts auf Ihrem WordPress-Server
Schritt 1: Wählen Sie eine Google-Schriftart
Durch die Verwendung weniger Google Fonts werden die Anfragen reduziert (weniger Schriftarten = weniger Anfragen).
Wählen Sie die Schriftstärken sorgfältig aus – Die Anzahl der von Ihnen verwendeten Schriftstärken wirkt sich auch auf die Geschwindigkeit aus, mit der Ihre Seite geladen wird. Um sicherzustellen, dass Google Fonts nur die von Ihnen benötigten Schriftarten lädt, deaktivieren Sie die anderen, sodass nur die von Ihnen benötigten Schriftarten gepackt werden.
Schritt 2: Laden Sie die Schriftart herunter
Das Herunterladen der Schriftart ist der zweite Schritt in diesem Prozess. Es ist wichtig zu beachten, dass Google alle Schriftstärken automatisch herunterlädt, sodass die Auswahl der Schriftstärken zu diesem Zeitpunkt nicht erforderlich ist. Stattdessen ist für Schritt drei die Auswahl der Schriftstärken erforderlich.
Schritt 3: Schriftarten in Web-Schriftarten konvertieren
Klicken Sie auf der Website auf die Schaltfläche „Schriftarten hinzufügen“, wählen Sie nur die Schriftarten aus, die Sie auf Ihrer Website verwenden möchten, und laden Sie sie hoch. Es handelt sich um eine roboto-regular.ttf-Datei und eine roboto-bold.ttf-Datei, sodass beide Gewichtungen enthalten sind. Da WOFF und WOFF2 alle wichtigen Browser abdecken, lassen Sie die Einstellungen unverändert. Klicken Sie auf die Schaltfläche „Konvertieren“, um den Konvertierungsvorgang zu starten.
Schritt 4: Konvertierte Schriftartdateien herunterladen
Sobald die Schriftarten konvertiert wurden, können Sie sie herunterladen. Da zwei Schriftarten auf unseren Computer heruntergeladen wurden, werden wir insgesamt 4 Schriftartendateien in der ZIP-Datei haben (da wir zwei Schriftarten heruntergeladen haben, werden wir vier Schriftartendateien in der ZIP-Datei haben).
Schritt 5: Laden Sie Schriftartdateien in WordPress-Dateien hoch
Bitte stellen Sie sicher, dass die Web-Font-Dateien über FTP oder cPanel , idealerweise im Ordner wp-content/uploads, um ein Überschreiben durch Theme- und Core-Updates zu vermeiden. Wir haben die Schriftarten in einen „Fonts“-Ordner hochgeladen (damit sie von anderen Dateien getrennt sind). Sie sollten die Schriftarten herunterladen können, nachdem Sie die Links in Ihrem Browser geöffnet haben, sodass Sie bestätigen können, dass sie erfolgreich hochgeladen wurden.
Schritt 6: Benutzerdefinierte Schriftart zu CSS hinzufügen
Nach dem Herunterladen der ZIP-Datei fügen wir das CSS „stylesheet.css“ in die Datei ein. Der folgende CSS-Code verbindet Ihre Schriftarten mit Ihrem vorhandenen CSS und macht sie verfügbar.
Sie können den CSS-Code in „functions.php“ platzieren oder Ihre style.css-Datei starten. Im CSS-Code kann eine externe CSS-Datei oder die wp_enqueue_style-Funktion von WordPress verwendet werden. Wir fügen es in die Standarddatei style.css des Themes ein. Ersetzen Sie alle relativen URLs durch absolute URLs, indem Sie den Code kopieren/in das Stylesheet einfügen.
Theme-Standard-URLs in stylesheet.css:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');
Ändern zu:
src: url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff');
Um die Schriftart problemlos im aktuellen HTML zu verwenden, erstellen Sie eine benutzerdefinierte Klasse. CSS-Klassen roboto_font und roboto_bold_font .
.roboto_font {
Schriftfamilie: „Roboto“, „Arial“, serifenlos; }
.roboto_bold_font {
Schriftfamilie: „Roboto“, „Arial“, serifenlos;
Schriftstärke: fett;
}
Schritt 7: Legen Sie die Standardschriftart fest
Um diese Schriftart zur Standardschriftart auf Ihrer Website zu machen, müssen Sie den CSS-Code in Ihre style.css-Datei einbinden.
Möglicherweise müssen Sie die Schriftart debuggen oder bearbeiten, um vorhandene Eigenschaften der Schriftfamilie zu ersetzen.
Der nächste Schritt besteht darin, die Datei stylesheet.css, die Sie erhalten haben, in Ihre Datei mit dem Namen stylesheet.css hochzuladen und das CSS hinzuzufügen. Der folgende CSS-Code sorgt dafür, dass Ihre Schriftarten mit Ihrem vorhandenen CSS funktionieren und sofort nach der Eingabe einsatzbereit sind. Sie können ein externes Stylesheet oder die WordPress-Funktion wp_enqueue_style verwenden, um Stylesheets in die Warteschlange einzureihen.
Methode 2: Web-Schriftarten vorab laden – Above the Fold-Optimierung
Wenn Sie Google Fonts verwenden, müssen Sie möglicherweise auf das Stylesheet zurückgreifen, das von Google erstellt und von den Google-Servern an Ihre WordPress-Website gesendet wurde. Wenn Sie das von Google Chrome angebotene Entwicklertool verwenden, um Ihre Website zu überprüfen, erhalten Sie möglicherweise einen Einblick in den Prozess hinter den Kulissen. Es besteht die Möglichkeit, dass Sie in Source zwei Einträge für Google Fonts sehen.
Bitte sehen Sie sich das hier angehängte Bild an.
Wenn Sie auf den „fonts.googleapis“ , erfahren Sie, dass auf der geöffneten Seite das Stylesheet angezeigt wird, für das Sie die URL erstellt haben. Darüber hinaus wird für jede Font-Face-Deklaration die spezifische Schriftartdatei aufgerufen.
„fonts.gstatic.com“ besuchen muss, um die erforderliche Stärke für die Schriftart zu erhalten, wenn eine andere Schriftstärke verwendet wird. Dieser Schritt kann die Ladezeit Ihrer WordPress-Seite verlängern.
Greifen Sie daher auf die Datei „functions.php“ für Ihr aktuelles Theme zu und geben Sie den folgenden PHP-Code in die Funktion ein, die für die Verwaltung von Schriftarten zuständig ist.
Funktion twentyeleven_resource_hints( $urls, $relation_type ) {
if ( wp_style_is( 'rumi-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
$urls[] = array(
'href' => 'https://fonts.gstatic.com',
„crossorigin“,
);
}
$urls zurückgeben;
}
add_filter( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 );
Methode 3: Optimieren Sie Google Fonts WordPress mit dem Plugin
Plugins erleichtern, wie bei den meisten WordPress-bezogenen Aufgaben, die Optimierung von Google Fonts erheblich. Darüber hinaus kümmern sie sich für Sie um den Softwareaspekt, sodass Sie sich keine Gedanken darüber machen müssen, wo der Code im System abgelegt werden soll.
Wenn Sie Google Fonts auf Ihrer WordPress-Website installiert haben und einen Leistungstest mit PageSpeed Insights oder GTmettrix durchführen, erhalten Sie die folgende Fehlermeldung:fonts.googleapis.com.
Dies liegt daran, dass Google Fonts nicht mit der WordPress-Plattform kompatibel sind. Es weist darauf hin, dass die Google Fonts Ihrer WordPress-Site optimiert werden müssen.
Für die Fixierung kann ein kostenloses Plugin genutzt werden. Es ist – OMGF | Hosten Sie Google Fonts lokal
Nach Abschluss der Installation beginnt das Plugin sofort mit der Umstellung der WordPress-Methode „wp en queue script()“ von Google Fonts auf die Funktion „wp head()“. Dieses Plugin erledigt alles alleine.
Weitere Artikel dieser Art finden Sie bei Seahawk Media .
