Google Fonts lassen sich ganz einfach in WordPress einbinden. 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 Dienst, der von Millionen von WordPress-Websites genutzt wird, um deren Erscheinungsbild und Benutzerfreundlichkeit zu verbessern. Hier erfahren Sie, wie Sie Google Fonts in WordPress verwenden, ohne die Website-Performance zu beeinträchtigen und Ihre PageSpeed- Werte zu optimieren.
Methode 1: Google Fonts auf Ihrem WordPress-Server hosten
Schritt 1: Wählen Sie eine Google-Schriftart aus
Durch die Verwendung von weniger Google Fonts werden weniger Anfragen gestellt (weniger Schriftarten = weniger Anfragen).
Schriftstärken sorgfältig auswählen – Die Anzahl der verwendeten Schriftstärken beeinflusst die Ladezeit Ihrer Seite. Um sicherzustellen, dass Google Fonts nur die benötigten Stärken lädt, deaktivieren Sie die übrigen, sodass nur die gewünschten Ergebnisse geladen werden.
Schritt 2: Schriftart herunterladen
Das Herunterladen der Schriftart ist der zweite Schritt. Wichtig: Google lädt automatisch alle Schriftschnitte herunter, daher ist die Auswahl von Schriftschnitten in diesem Schritt nicht erforderlich. Die Auswahl von Schriftschnitten wird erst im dritten Schritt benötigt.
Schritt 3: Schriftarten in Webfonts 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 diese hoch. Es handelt sich um eine roboto-regular.ttf-Datei und eine roboto-bold.ttf-Datei, sodass beide Schriftschnitte enthalten sind. Da WOFF und WOFF2 alle gängigen Browser abdecken, können Sie die Einstellungen unverändert lassen. Klicken Sie auf die Schaltfläche „Konvertieren“, um die Konvertierung 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, befinden sich insgesamt vier Schriftartdateien in der ZIP-Datei (da wir zwei Schriftarten heruntergeladen haben, befinden sich vier Schriftartdateien in der ZIP-Datei).
Schritt 5: Schriftdateien in die WordPress-Dateien hochladen
Bitte laden Sie die Webfont-Dateien per FTP oder cPanel , idealerweise in den Ordner wp-content/uploads, um zu verhindern, dass sie durch Theme- und Core-Updates überschrieben werden. Wir haben die Schriftarten in einen Ordner namens „fonts“ hochgeladen (um sie von anderen Dateien zu trennen). Sie können die Schriftarten herunterladen, nachdem Sie die Links in Ihrem Browser geöffnet haben, um zu überprüfen, ob der Upload erfolgreich war.
Schritt 6: Benutzerdefinierte Schriftart zu CSS hinzufügen
Nach dem Herunterladen der ZIP-Datei fügen wir die CSS-Datei stylesheet.css hinzu. Der untenstehende CSS-Code verbindet Ihre Schriftarten mit Ihrem bestehenden CSS und stellt sie zur Verfügung.
Sie können den CSS-Code in die functions.php einfügen oder Ihre style.css-Datei beginnen. Im CSS-Code können Sie eine externe CSS-Datei oder die WordPress-Funktion wp_enqueue_style verwenden. Wir fügen den Code 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 und einfügen.
Standard-URLs des Themes in stylesheet.css:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');
Ändern in:
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-Code 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 {
Schriftart: “Roboto”, “Arial”, serifenlos;
Schriftstärke: fett;
}
Schritt 7: Standardschriftart festlegen
Um diese Schriftart als Standardschriftart auf Ihrer Website festzulegen, müssen Sie den CSS-Code in Ihre style.css-Datei einfügen.
Möglicherweise müssen Sie die Schriftart debuggen oder bearbeiten, um vorhandene Schriftfamilieneigenschaften zu ersetzen.
Im nächsten Schritt laden Sie die Datei stylesheet.css hoch und fügen den CSS-Code hinzu. Der unten stehende CSS-Code sorgt dafür, dass Ihre Schriftarten mit Ihrem bestehenden CSS kompatibel sind und sofort nach dem Einfügen verwendet werden können. Sie können ein externes Stylesheet oder die WordPress-Funktion wp_enqueue_style verwenden, um Stylesheets einzubinden.
Methode 2: Webfonts vorladen – Optimierung des sichtbaren Bereichs
Wenn Sie Google Fonts verwenden, müssen Sie möglicherweise das Stylesheet konsultieren, das von Google erstellt und von den Google-Servern an Ihre WordPress-Website gesendet wurde. Mithilfe der Entwicklertools von Google Chrome können Sie Ihre Website untersuchen und so einen Einblick in den zugrundeliegenden Prozess erhalten. Möglicherweise finden Sie dort zwei Einträge für Google Fonts im Quelltext.
Bitte sehen Sie sich das beigefügte Bild an.
Wenn Sie auf den fonts.googleapis , werden Sie feststellen, dass das Stylesheet, für das Sie die URL generiert haben, auf der geöffneten Seite angezeigt wird. Außerdem wird für jede font-face-Deklaration die jeweilige Schriftartdatei aufgerufen.
fonts.gstatic.com besuchen muss, um die benötigte Schriftstärke zu ermitteln, falls eine andere Schriftstärke verwendet wird. Dieser Schritt kann die Ladezeit Ihrer WordPress-Seite verlängern.
Öffnen Sie daher die functions.php-Datei Ihres aktuellen Themes und fügen 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: Google Fonts in WordPress mithilfe eines Plugins optimieren
Plugins vereinfachen, wie bei den meisten WordPress-Aufgaben, die Optimierung von Google Fonts erheblich. Außerdem kümmern sie sich um die Software-Aspekte, sodass Sie sich keine Gedanken darüber machen müssen, wo der Code im System platziert werden soll.
Wenn Sie Google Fonts auf Ihrer WordPress-Website installiert haben und einen Leistungstest mit PageSpeed Insights oder GTmetrix durchführen, erhalten Sie die folgende Fehlermeldung: fonts.googleapis.com.
Dies tritt auf, weil Google Fonts nicht mit der WordPress-Plattform kompatibel sind. Es bedeutet, dass Ihre WordPress-Website für die Verwendung von Google Fonts optimiert werden muss.
Zur Behebung dieses Problems kann ein kostenloses Plugin verwendet werden. Es heißt: OMGF | Host Google Fonts Locally
Nach Abschluss der Installation beginnt das Plugin sofort damit, die WordPress-Methode `wp en queue script()Google Fonts` durch die Funktion `wp head()` zu ersetzen. Das Plugin erledigt dies vollautomatisch.
Weitere Artikel dieser Art finden Sie bei Seahawk Media .
