Es ist einfach, Google Fonts in WordPress zu verwenden. Es handelt sich um ein kostenloses Verzeichnis mit über 800 Webfonts, die Sie auf Ihrer Website verwenden können. Google Fonts ist ein erstklassiger kostenloser Service, der von Millionen von WordPress-Websites genutzt wird, um das Erscheinungsbild und die Benutzerfreundlichkeit ihrer Website zu verbessern. Hier erfahren Sie, wie Sie Google-Schriftarten in WordPress verwenden können, ohne die Leistung Ihrer Website zu beeinträchtigen und Ihre PageSpeed-Bewertungen zu verbessern.
Methode 1: Hosten Sie Google Fonts auf Ihrem WordPress-Server
Schritt 1: Wählen Sie eine Google-Schriftart
Wenn Sie weniger Google Fonts verwenden, verringern sich die Anfragen (weniger Schriften = weniger Anfragen).
Wählen Sie die Schriftschnitte sorgfältig aus - Die Anzahl der Schriftschnitte, die Sie verwenden, wirkt sich auch auf die Ladegeschwindigkeit Ihrer Seite aus. Um sicherzustellen, dass Google Fonts nur die Schriftschnitte lädt, die Sie benötigen, deaktivieren Sie die anderen, so dass nur die benötigten Schriftschnitte gepackt werden.
Schritt 2: Herunterladen der Schriftart
Das Herunterladen der Schriftart ist der zweite Schritt des Vorgangs. Es ist wichtig zu beachten, dass Google automatisch alle Schriftschnitte herunterlädt, so dass die Auswahl der Schriftschnitte in diesem Stadium nicht erforderlich ist. Stattdessen wird die Auswahl der Schriftschnitte für Schritt drei benötigt.
Schritt 3: Konvertieren von Schriftarten in Web Fonts
Klicken Sie auf die Schaltfläche "Schriften hinzufügen" auf der Website, wählen Sie nur die Schriften 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, so dass beide Schnitte enthalten sind. Da WOFF und WOFF2 alle wichtigen Browser abdecken, lassen Sie die Einstellungen so wie sie sind. Klicken Sie auf die Schaltfläche Konvertieren, um den Konvertierungsprozess zu starten.
Schritt 4: Konvertierte Schriftdateien herunterladen
Sobald die Schriftarten konvertiert sind, können Sie sie herunterladen. Da wir zwei Schriftarten auf unseren Computer heruntergeladen haben, befinden sich insgesamt 4 Schriftartendateien in der ZIP-Datei (da wir zwei Schriftarten heruntergeladen haben, befinden sich vier Schriftartendateien in der ZIP-Datei).
Schritt 5: Font-Dateien in WordPress-Dateien hochladen
Bitte stellen Sie sicher, dass die Webfont-Dateien per FTP oder cPanel hochgeladen werden, idealerweise in den Ordner wp-content/uploads, um zu vermeiden, dass sie von Theme- und Core-Updates überschrieben werden. 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, so dass Sie bestätigen können, dass sie erfolgreich hochgeladen wurden.
Schritt 6: Benutzerdefinierte Schriftart zum CSS hinzufügen
Nach dem Herunterladen der Zip-Datei fügen wir die CSS-Datei stylesheet.css in die Datei ein. Der CSS-Code unten verbindet Ihre Schriftarten mit Ihrem bestehenden CSS und macht sie verfügbar.
Sie können den CSS-Code in der Datei functions.php oder am Anfang Ihrer style.css-Datei platzieren. Eine externe CSS-Datei oder die WordPress-Funktion wp_enqueue_style kann im CSS-Code verwendet werden. Wir fügen ihn in die standardmäßige style.css-Datei des Themes ein. Ersetzen Sie alle relativen URLs durch absolute URLs, indem Sie den Code in das Stylesheet kopieren/einfügen.
Standard-URLs des Themas in der Datei stylesheet.css:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');
Wechseln 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 einfach im aktuellen HTML zu verwenden, erstellen Sie eine benutzerdefinierte Klasse. CSS-Klassen roboto_font und roboto_bold_font.
.roboto_font {
font-family: "Roboto", "Arial", sans-serif; }
.roboto_bold_font {
font-family: "Roboto", "Arial", sans-serif;
Schriftgewicht: fett;
}
Schritt 7: Einstellen der Standardschriftart
Um diese Schriftart zur Standardschriftart auf Ihrer Website zu machen, müssen Sie den CSS-Code in Ihre style.css-Datei aufnehmen.
Möglicherweise müssen Sie die Schriftart debuggen oder bearbeiten, um vorhandene Eigenschaften von font-family zu ersetzen.
Der nächste Schritt besteht darin, die erhaltene Datei stylesheet.css in Ihre Datei mit dem Namen stylesheet.css hochzuladen und das CSS hinzuzufügen. Der unten stehende CSS-Code sorgt dafür, dass Ihre Schriftarten mit Ihrem vorhandenen CSS zusammenarbeiten und sofort verwendet werden können, sobald Sie ihn eingeben. Sie können ein externes Stylesheet oder die WordPress-Funktion wp_enqueue_style verwenden, um Stylesheets einzureihen.
Methode 2: Web Fonts vorladen - Above the Fold-Optimierung
Wenn Sie Google Fonts verwenden, müssen Sie sich möglicherweise auf die Stilvorlage beziehen, die von Google vorbereitet und von den Google-Servern an Ihre WordPress-Website gesendet wurde. Wenn Sie das von Google Chrome angebotene Entwickler-Tool verwenden, um Ihre Website zu untersuchen, können Sie einen Blick auf den Prozess hinter den Kulissen werfen. Es besteht die Möglichkeit, dass Sie zwei Einträge für Google Fonts in Source sehen.
Bitte sehen Sie sich das Bild an, das hier beigefügt ist.
Wenn Sie auf den Link fonts.googleapis klicken, werden Sie feststellen, dass das Stylesheet, für das Sie die URL erstellt haben, auf der geöffneten Seite angezeigt wird. Außerdem wird bei jeder Font-Face-Deklaration die entsprechende Schriftartdatei aufgerufen.
Dies bedeutet, dass der Benutzer fonts.gstatic.com besuchen muss, um die erforderliche Gewichtung für die Schriftart zu erhalten, wenn eine andere Schriftartgewichtung verwendet wird. Dieser Schritt kann die Ladezeit Ihrer WordPress-Seite verlängern.
Rufen Sie daher die Datei functions.php Ihres aktuellen Themes auf und geben Sie den folgenden PHP-Code in die Funktion ein, die für die Verwaltung der Schriftarten zuständig ist.
function twentyeleven_resource_hints( $urls, $relation_type ) {
if ( wp_style_is( 'rumi-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
$urls[] = array(
'href' => 'https://fonts.gstatic.com',
Crossorigin','
);
}
return $urls;
}
add_filter( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 );
Methode 3: Optimieren von Google Fonts WordPress mit Plugin
Wie bei den meisten Aufgaben im Zusammenhang mit WordPress machen Plugins die Optimierung von Google Fonts viel einfacher. Außerdem übernehmen sie den Software-Aspekt für Sie, so dass Sie sich keine Gedanken darüber machen müssen, wo der Code im System erscheinen 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 geschieht, weil Google Fonts nicht mit der WordPress-Plattform kompatibel sind. Das bedeutet, dass Ihre WordPress-Website für Google Fonts optimiert werden muss.
Für die Fixierung derselben kann ein kostenloses Plugin verwendet werden. Es ist - OMGF | Google Fonts lokal hosten
Nach Abschluss der Installation beginnt das Plugin sofort damit, die WordPress-Methode wp en queue script()Google Fonts auf die Funktion wp head() umzustellen. Dieses Plugin macht alles von selbst.
Weitere Artikel dieser Art finden Sie bei Seahawk Media.
