Wie verwende ich Google Fonts mit WordPress?

Im modernen Web dreht sich alles um die Benutzererfahrung. Unternehmen investieren viel Zeit und Geld, um sicherzustellen, dass die Besucher ihrer Website beim Surfen auf ihrer Website die bestmögliche Erfahrung machen.

Die Textdarstellung spielt eine wesentliche Rolle in der Ästhetik der Website. Es spielt keine Rolle, wie gut die Qualität Ihrer Inhalte ist; Wenn es nicht angenehm zu lesen ist und den Lesern zu überladen ist, sind alle Ihre Bemühungen umsonst.

Obwohl Ihnen eine Reihe von typografischen Optionen zur Verfügung steht, erhalten Sie am einfachsten Zugang zu Hunderten von professionellen Schriftarten (kostenlos), indem Sie Google Fonts mit Ihrer WordPress-Website verwenden.

In diesem Beitrag präsentiere ich Ihnen Schritt-für-Schritt-Anleitungen, wie Sie WordPress Google Fonts manuell und mit dem Easy Google Fonts- Plugin zu Ihrer Website hinzufügen können. Außerdem zeige ich Ihnen die besten Schriftarten, mit denen Sie die Lesbarkeit des Inhalts Ihrer Website verbessern können.

1- Was sind WordPress Google Fonts und warum sollten Sie sie verwenden?

Bevor wir beginnen, werfen wir einen kurzen Blick auf die Google Fonts und die wichtigsten Vorteile ihrer Verwendung auf Ihrer WordPress-Website.

Google Fonts ist eine Bibliothek frei lizenzierter Schriftarten, die 2010 eingeführt wurde. Sie können die erstaunliche Bibliothek von Google Fonts verwenden, indem Sie die bereitgestellte API aufrufen. Das Interessante daran ist, dass Sie 877 weboptimierte Schriftarten verwenden können – kostenlos. Das ist unglaublich. Es verfügt über ein interaktives Webverzeichnis, mit dem Sie nach bestimmten Schriftarten suchen und diese in Ihrem Webbrowser testen können.

Die Verwendung von WordPress Google Fonts hat eine Reihe von Vorteilen. Sie können kostenlos verwendet werden (auch für kommerzielle Projekte), vorgehostet (damit sie die Ressourcen Ihres Servers nicht beanspruchen) und können heruntergeladen werden (Sie können sie in gedruckter Form verwenden).

Es gibt eine große Anzahl von Websites, die derzeit Google Fonts in WordPress zu ihrem Vorteil verwenden. Alle modernen Themes unterstützen die Verwendung von Google Fonts.

Wenn Sie bereit sind, die Typografie Ihrer Website mit benutzerfreundlichen Webfonts zu überarbeiten, müssen Sie nur die richtigen Schriftarten finden und sie mit Ihrer WordPress-Website verwenden.

2- Wie man Google Fonts manuell zu WordPress hinzufügt

Google Fonts nimmt Ihnen die meiste Mühe beim Einbetten von Schriftfamilien in Ihre Website ab. Dies ist eine Online-Bibliothek, die in jedem Webprojekt wie jedes andere JS- oder CSS-Skript aufgerufen werden kann.

In diesem Abschnitt zeige ich Ihnen, wie Sie Google Fonts manuell auf einer WordPress-Website installieren.

Schritt 1: Finden Sie die Schriftart, die Sie zu Ihrer Website hinzufügen möchten

Durchsuchen Sie zunächst das Google Fonts-Verzeichnis und wählen Sie die Schriftart aus, die Sie auf Ihrer WordPress-Website verwenden möchten. Wenn Sie bereits über eine bestimmte Schriftart verfügen, können Sie diese einfach über das Suchfeld in der rechten Seitenleiste suchen.

Sie können Schriftarten auch nach Kategorie, Sprachen, Anzahl der Stile, Dicke, Neigung und Breite filtern oder sie nach dem Datum, an dem sie hinzugefügt wurden, alphabetisch, im Trend oder nach Beliebtheit sortieren.

• Dies sind Schriftarten, bei denen kleine Linien am Ende von Buchstabenstrichen angebracht sind, zB Times New Roman und Courier .
• Serifenlos. Schriftarten ohne die kleinen Striche am Ende der Buchstabenstriche sind serifenlose Schriftarten, zB Helvetica und Roboto .
• Display-Schriftarten werden hauptsächlich für großen Text, zB Titel, verwendet.
• Schriften, die handschriftlich aussehen, zB Pacifico .
• Schriftarten, die genau den gleichen Abstand zu allen Zeichen haben, zB Source Code Pro .

Einer der besten Vorteile der interaktiven Verzeichnisfunktion von Google Fonts besteht darin, dass Sie schnell eine Vorschau der gewünschten Schriftarten anzeigen können. Sie müssen lediglich in das Feld der Schriftart klicken und Text eingeben.

Für dieses Tutorial verwende ich Open Sans .

Schritt 2: Fügen Sie die Schriftarten zu Ihrer Auswahl hinzu

Da wir nun wissen, welche Schriftart wir verwenden, fügen wir sie unserer Auswahl hinzu. Sie können dies tun, indem Sie auf das Pluszeichen (+) in der oberen rechten Ecke des Schriftfamilienfelds klicken.

Sie können Ihrer Auswahl beliebig viele Schriftfamilien hinzufügen. Wenn Sie alle Einstellungen vorgenommen haben, klicken Sie unten auf dem Bildschirm auf die schwarze Leiste X-Familie ausgewählt , um Ihre Auswahl anzuzeigen.

Schritt 3: Passen Sie die Schriftart an

Die Leiste X Family Selected öffnet ein Fenster mit zwei Registerkarten – Einbetten und Anpassen . Bevor wir die Schriftfamilie in unsere WordPress-Website einbetten, nehmen wir uns einen Moment Zeit, um sie ein wenig anzupassen.

Aktivieren Sie auf dem Bildschirm Anpassen die Kästchen für die Stile und Sprachen, die Sie auf Ihrer Website verwenden möchten.

Beachten Sie, dass das Laden der Seiten Ihrer Website umso länger dauert, je mehr Schriftstile und Sprachen Sie auswählen. Sie erhalten eine Ladezeit - Anzeige in dem gleichen Bildschirm feststellen , dass Sie wissen , ob Ihre Auswahl ermöglicht wird die Ladezeiten langsam machen.

Damit sich unsere Schriftartenauswahl nicht auf die Seitenladezeiten unserer Website auswirkt, haben wir uns für eine einfache Auswahl entschieden – Light 300 und Regular 400 .

Schritt 4: Betten Sie die Google Fonts in Ihre WordPress-Website ein

Es gibt verschiedene Möglichkeiten, WordPress eine benutzerdefinierte Schriftart hinzuzufügen. Wir zeigen Ihnen, wie es mit der Funktion wp_enqueue_style() geht , da dies der empfohlene Ansatz für WordPress-Websites ist.

Beginnen Sie, indem Sie zurück zur Registerkarte Einbetten gehen und den Link (URL) Ihrer Schriftauswahl in Ihre Zwischenablage kopieren. In unserem Fall lautet die vollständige URL: https://fonts.googleapis.com/css?family=Open+Sans:300,400 .

Melden Sie sich als Nächstes bei Ihrem WordPress-Dashboard an und gehen Sie in Appearance zum Editor und öffnen Sie die Datei functions.php Ihres aktiven Themes mit einem FTP-Client und fügen Sie den folgenden Code hinzu.

 Funktion add_google_fonts() {

wp_enqueue_style( ' add_google_fonts ', ' https://fonts.googleapis.com/css?family=Open+Sans:300,400', false );}

add_action( 'wp_enqueue_scripts', 'add_google_fonts');

Hinweis: Sie müssen die URL durch Ihre eigene ersetzen.

Sie können mit der Verwendung der gerade hinzugefügten Schriftart beginnen, indem Sie die Typografieoptionen Ihres Designs verwenden (sofern diese unterstützt werden) oder indem Sie Code zum Haupt-Stylesheet Ihres aktiven Designs hinzufügen. Wenn wir beispielsweise alle H2-Überschriften in unsere neue Schriftart ändern möchten, könnte unser Code etwa so aussehen:

 h2 {

Schriftfamilie: 'Open Sans', serifenlos;

}

Ich habe mein WordPress erfolgreich mit Google Fonts aktualisiert. Es ist möglich, dass Google Fonts aus seltsamen Gründen nicht funktioniert und ich auf den Standardschriftsatz verweisen muss, der als Backup angezeigt werden kann. Aber das passiert recht selten.

Warum Geschwindigkeit für SEO & UX entscheidend ist?

Diese Expertentipps zeigen Ihnen, wie Sie die Geschwindigkeit Ihrer WordPress-Websites verbessern können.

Ich stimme den Cloudways-Nutzungsbedingungen und der Datenschutzrichtlinie zu

Holen Sie sich jetzt ein E-Book!

Danke schön

Ihr E-Book ist auf dem Weg zu Ihrem Posteingang.

Fügen Sie dazu einfach Ihre lokal gehosteten Standardschriftarten wie Georgia, Cambria oder Courier hinzu.

3- Wie man mit einem Plugin Google Fonts zu WordPress hinzufügt

Für einige ist die manuelle Integration von WordPress Google Fonts möglicherweise nicht die Option. Mach dir keine Sorgen. Es gibt eine andere (einfachere) Möglichkeit, Ihrer WordPress-Website Google Fonts hinzuzufügen. Durch ein Plugin.

In diesem Abschnitt zeige ich dir, wie du mit dem Easy Google Fonts Plugin Google Fonts in WordPress einbinden kannst.

Schritt 1: Installieren und aktivieren Sie das Plugin

Melden Sie sich bei Ihrem WordPress-Admin-Panel an und navigieren Sie zu Plugins > Neu hinzufügen . Suchen Sie nach Easy Google Fonts und installieren Sie es auf Ihrer Website.

Sobald das Plugin installiert ist, klicken Sie auf die Schaltfläche Aktivieren , um es zu verwenden.

Schritt 2: Beginnen Sie mit der Verwendung von Google Fonts

Sobald Sie das Plugin für Ihre Website aktivieren, werden die Stylesheets für die von Ihnen ausgewählten Google Fonts automatisch in die Warteschlange gestellt. Um zu beginnen, gehen Sie über das WordPress-Admin-Panel zu Erscheinungsbild > Anpassen .

Sie werden feststellen, dass dem WordPress Customizer ein neuer Menüpunkt namens Typography hinzugefügt wurde.

Es ermöglicht Ihnen, die Typografieeinstellungen Ihrer Absätze und verschiedener Überschriften (H1 bis H6) zu steuern.

Angenommen, Sie möchten die Schriftart Paragraphs auf Ihrer Website bearbeiten. Mit dem Easy Google Fonts-Plugin können Sie Stil, Aussehen und Position anpassen. Werfen wir einen Blick auf die verschiedenen Stiloptionen, die es bietet.

Auf der Registerkarte Stile können Sie Ihr Skript, die Schriftfamilie, die Schriftstärke, die Textdekoration und die Texttransformation konfigurieren. Mit der Option für die Schriftfamilie haben Sie Zugriff auf Hunderte von Google-Schriften, die als Standard Web Fonts , Google Serif Fonts , Google Sans Serif Fonts , Google Display Fonts , Google Handwriting Fonts und Google Monospace Fonts kategorisiert sind .

Wenn wir also Open Sans verwenden wollten, würden wir die script-Option auf Latin setzen , die font family-Option auf Open Sans und die Schriftstärke auf Regular (was Regular 400 entspricht ).

Überprüfen Sie einfach, wie sich die Schriftart im Vorschaubildschirm geändert hat. Ein großer Vorteil der Verwendung des Easy Google Fonts-Plugins besteht darin, dass Sie eine Live-Vorschau sehen können, wie Ihre Beiträge und Seiten aussehen, wenn Sie eine Schriftart auswählen.

4- Beste zu verwendende Schriftarten

Bei der Auswahl von Schriftarten mit Google Fonts sind keine Grenzen gesetzt. Als Webmaster haben Sie die Freiheit, die Schriftart zu wählen, die Sie für Ihre Leser für geeignet halten. Es gibt jedoch einige Schriftarten, die aus Gründen der Lesbarkeit beliebt sind.

Schauen wir uns die besten Google Fonts an, die weit verbreitet sind und die beste Lesbarkeit bieten.

1. Lora

Lora ist aufgrund ihrer Lesbarkeit und Varianten eine der am weitesten verbreiteten Schriftfamilien.

2. Playfair-Anzeige

Diese Schriftfamilie bietet eine bessere Lesbarkeit des Textes und ist sowohl für Web als auch für Print geeignet.

3. Archiv

Diese Schriftart gehört zur grotesken serifenlosen Schriftfamilie. Es hat ein sauberes Aussehen, das für Fließtext geeignet ist.

4. Roboter

Roboto ist eine der am häufigsten verwendeten Schriftarten im modernen Web. Es sieht gut aus mit minimalen Webdesigns und bietet den Benutzern eine hervorragende Lesbarkeit.

5. Montserrat

Montserrat hat seine Wurzeln in der urbanen Typografie des 20. Jahrhunderts. Eine weitere sehr beliebte Schriftfamilie, die eine Reihe von Varianten enthält.

6. Rubik

Rubik ist sehr sauber und eine San-Serif-Schriftfamilie, die mehr als 470.000 Websites auf der ganzen Welt bedient.

7. Quelle Sans

Sie müssen die Source Sans-Schriftfamilie verwendet haben, da sie über die Google Fonts-API mehr als 4,18 Milliarden Iterationen umfasst.

8. Lato

Lato ist auch eine Sans Serif-Schrift und wird von Webmastern als professionelle und klare Schrift angesehen. Es wird in fast jeder Position des Inhalts verwendet.

9. PT-Serifen

Mit über einer Million Websites, die diese Schriftart verwenden, gehört PT Serif zu den am häufigsten verwendeten Google-Schriften. Es ist sowohl für Web- als auch für Print-Dokumente geeignet.

10. Öffnen Sie Sans

Die Open Sans-Schrift ist der menschlichen Schrift am nächsten, was das Lesen sowohl im Internet als auch auf Papier erleichtert. Die Google Fonts API hat diese Schriftart in nur einer Woche mehr als 28,5 Milliarden Mal bereitgestellt!

Es gibt viele andere Google Fonts für WordPress-Websites. Seien Sie bei der Auswahl der Schriftfamilie mit Bedacht, da sie sowohl positive als auch negative Auswirkungen auf die Leserschaft Ihrer Website haben kann.

5- Best Practices für die Verwendung von Google Fonts auf einer Website

Die Integration von WordPress Google Fonts ist kein Hexenwerk, aber es gibt immer zwei Möglichkeiten, jede Aufgabe zu erledigen – den guten Weg und den besten Weg.

Sehen wir uns die Best Practices bei der Verwendung der Google Fonts in WordPress an.

– Schriftstärken begrenzen: Die Auswahl des kompletten Satzes von Schriftstärken ist verlockend, hat aber auch Nachteile. Für jede Variante wird die API schwerer und benötigt mehr Zeit, um den vollständigen Satz von Schriftstärken zu laden.

Diese wird normalerweise beim Start der Webseite geladen und kann, wenn sie nicht optimiert ist, die anfängliche Ladezeit Ihrer Webseite verlangsamen.

-Schriften lokal hosten: Google-Schriften sind eine Online-Bibliothek, die anderswo gehostet wird. Obwohl dies nur minimale Auswirkungen auf die Leistung Ihrer Website hat, können Sie im Falle einer Nichtverfügbarkeit die ausgewählten Google-Schriftarten dennoch bereitstellen, wenn sie lokal gehostet werden.

- Barrierefreiheit ist wichtig: Es ist keine Option mehr, Ihre Website für Menschen mit Sehbehinderung zu optimieren. Mit Google Fonts können Sie Ihre Schriftart so gestalten, wie es für diese Art von Besuchern am bequemsten ist.

Verwenden Sie den Kontrast, der auf den meisten Bildschirmgrößen und -typen gut lesbar ist und das Auge des Lesers nicht belastet. Die Verwendung von sehr hellen Farben oder sehr hellen Farben ist nicht ideal. Wählen Sie die Farbe und Größe, die für die meisten Leser am besten geeignet ist.

Abschluss

Die Verwendung von Google Fonts in WordPress kann Ihnen helfen, das Erscheinungsbild Ihrer Website schnell zu ändern. Egal, ob Sie eine professionell aussehende oder eine unterhaltsame Website suchen, Google Fonts hat wahrscheinlich die perfekte Schriftart für Sie.

Wir haben Ihnen gezeigt, wie Sie mithilfe der Funktion wp_enqueue_style() und mithilfe des Easy Google Fonts-Plugins manuell Google Fonts zu Ihrer Website hinzufügen können. Hoffentlich sind Sie jetzt in einer guten Position, um die Dinge selbst weiterzuentwickeln.

Haben Sie schon einmal eine Bibliothek mit Schriftarten auf Ihrer WordPress-Website verwendet? Wir würden uns freuen, von Ihnen zu hören, also lassen Sie es uns wissen, indem Sie unten kommentieren!