So fügen Sie benutzerdefinierte WordPress-Schriften hinzu (und wählen Sie die passenden Schriftarten aus)

Suchen Sie nach einer Möglichkeit, Ihrer Website Ihre eigenen benutzerdefinierten WordPress-Schriftarten hinzuzufügen?

Ihr WordPress-Theme wird wahrscheinlich mit einem eigenen Satz von Schriftarten geliefert, aus denen Sie auswählen können, aber die Optionen können ziemlich begrenzt sein, daher ist es völlig verständlich, dass Sie stattdessen Ihre eigenen WordPress-Schriftarten hinzufügen möchten.

In diesem Beitrag erfahren Sie, wie Sie beliebige Schriftarten mit verschiedenen Methoden in WordPress hochladen und verwenden.

Falls Sie nicht mit der Idee der Verwendung Ihrer eigenen WordPress-Schriftarten vertraut sind, beginnen wir mit einer kurzen Einführung, wo Sie benutzerdefinierte Schriftarten finden und wie Sie sie koppeln.

Dann zeigen wir Ihnen, wie Sie benutzerdefinierte WordPress-Schriften hinzufügen von:

• Google-Schriften
• Adobe-Schriften (Typekit)
• Buchstäblich woanders! (indem Sie eine Schriftartdatei hochladen und CSS3 @font-face verwenden)

Klicken Sie auf diesen Link, um direkt zu den Tutorials zu gelangen.

Wo finde ich benutzerdefinierte Schriftarten für WordPress

Der bekannteste Ort, um benutzerdefinierte WordPress-Schriften zu finden, ist definitiv Google Fonts. Bei Google Fonts finden Sie ein Repository mit mehr als 900 Schriftarten, die alle kostenlos sind und dank Googles CDN super einfach in Ihre WordPress-Site zu integrieren sind.

Nach Google Fonts ist eine weitere bekannte Option Adobe Fonts ( früher Typekit genannt ). Adobe Fonts sind im Creative Cloud-Abonnement von Adobe ohne zusätzliche Kosten enthalten, stehen jedoch Nichtabonnenten nicht zur Verfügung.

Schließlich finden Sie viele andere Websites, die kostenlose und Premium-Schriftarten zusammenfassen. Zwei unserer Favoriten sind:

• Font Squirrel – sammelt zu 100 % kostenlose Schriftarten für die kommerzielle Nutzung.
• Fonts.com – hat eine große Sammlung von Premium-Schriften.

So koppeln Sie Schriftarten, damit Ihre Site fantastisch aussieht

Normalerweise werden Sie auf Ihrer WordPress-Site keine einzige Schriftart verwenden. Stattdessen verwenden die meisten Websites Schriftartenpaare, um ein interessanteres Design zu erstellen und Inhalte zu unterscheiden.

Sie möchten jedoch nicht zufällig zwei Schriftarten zusammenwerfen – das sieht vielleicht nicht zu heiß aus.

Stattdessen benötigen Sie zwei zusammenarbeitende Schriftarten, die, wenn Sie kein Designer sind, schwer zu finden sein können.

Um Ihnen zu helfen, gibt es eine Reihe großartiger Websites, die Ihnen Schriftartenpaare vorschlagen. Wenn Sie beispielsweise eine Schriftart finden, die Sie absolut lieben , können Sie eine dieser Websites verwenden, um ein Paar dafür zu finden. Einige unserer Favoriten sind:

• Schriftpaar
• Fontjoy
• Typ.io

Es gibt zwar keine Regel, die besagt, dass Sie nur zwei Schriftarten verwenden können, aber Sie sollten vorsichtig sein, zu viele WordPress-Schriftarten zu verwenden. Abgesehen von der Möglichkeit, ein chaotisches Design zu erstellen, kann die Verwendung zu vieler benutzerdefinierter Schriftarten auch die Ladezeiten Ihrer Website verlangsamen.

So fügen Sie benutzerdefinierte WordPress-Schriften hinzu: Schritt-für-Schritt-Anleitungen

Nun zum spaßigen Teil – hier erfahren Sie, wie Sie Ihre eigenen benutzerdefinierten WordPress-Schriften verwenden können.

Es gibt einige Wege, die Sie hier wählen können, je nachdem, woher Sie Ihre Schriftarten beziehen möchten.

Hier sind die drei Methoden, die wir behandeln werden. Auch hier können Sie auf einen Link klicken, um direkt zu einem bestimmten Tutorial zu springen:

1. Fügen Sie Google Fonts in WordPress hinzu (Plugin, manuell oder lokale Hosting-Methoden)
2. Adobe Fonts (Typekit) in WordPress hinzufügen
3. Verwenden Sie CSS3 @font-face zum Hochladen und Hinzufügen von Schriftarten in WordPress

So fügen Sie Google Fonts zu WordPress hinzu

Da Google Fonts die beliebteste Quelle für benutzerdefinierte WordPress-Schriften ist, werden wir drei verschiedene Möglichkeiten behandeln, um Google Fonts zu WordPress hinzuzufügen:

1. Fügen Sie Google Fonts aus dem CDN von Google mit einem Plugin hinzu
2. Manuelles Hinzufügen von Google Fonts aus dem CDN von Google
3. Hosten Sie Google Fonts lokal in WordPress mit einem Plugin

So fügen Sie Google Fonts in WordPress mit einem Plugin hinzu

Aufgrund der Popularität von Google Fonts finden Sie mehrere hochwertige Plugins, die es sehr einfach machen, Google Fonts zu WordPress hinzuzufügen, wobei unser Favorit Easy Google Fonts ist, weil es:

• Kostenlos
• Leicht
• Einfach zu verwenden

Sobald Sie das Plugin installiert und aktiviert haben, gehen Sie in Ihrem WordPress-Dashboard zu Erscheinungsbild → Anpassen , um den Echtzeit-WordPress-Anpasser zu starten.

Klicken Sie dann auf die Option Typografie , um Ihre Google Fonts-Optionen auszuwählen:

Von dort aus können Sie die Optionen verwenden, um für jedes Element auf Ihrer Website eine benutzerdefinierte Schriftart auszuwählen:

So sieht es beispielsweise aus, die Absatzschriftart zu ändern:

Neben der Auswahl der Schriftart selbst können Sie mit dem Plugin auch Folgendes anpassen:

• Schriftstärke
• Textdekoration
• Farben

Wenn Sie sich mit ein wenig CSS auskennen, können Sie auch die Font Controls- Funktion des Plugins verwenden, um bestimmte Elemente zu gruppieren. Sie können beispielsweise Header-Selektoren kombinieren, um auf alle Ihre Header gleichzeitig abzuzielen.

Um dies einzurichten, gehen Sie zu Einstellungen → Google Fonts und erstellen Sie ein neues Font Control, um auf bestimmte CSS-Selektoren abzuzielen:

So fügen Sie Google Fonts in WordPress ohne Plugin hinzu

Da Google alle seine Schriftarten auf seinem eigenen CDN hostet, ist es auch ziemlich einfach, Google Fonts manuell zu WordPress hinzuzufügen.

Anstatt die Schriftartendateien auf Ihren Server hochzuladen, können Sie im Grunde einfach auf das von Google gehostete CDN verlinken und Google übernimmt die Bereitstellung der Schriftarten für Sie.

Manche Leute tun dies aus Leistungsgründen nicht gerne – ich werde im nächsten Abschnitt eine Möglichkeit zum lokalen Hosten von Google Fonts vorstellen, wenn Sie möchten .

Um zu beginnen, müssen Sie die Google Fonts-Website verwenden, um die Schriftart auszuwählen, die Sie hinzufügen möchten.

Nehmen wir für dieses Beispiel an, Sie möchten Roboto verwenden .

Gehen Sie zur Seite der Schriftart und klicken Sie auf + Diese Schriftart auswählen :

Dadurch wird ein Fenster in der unteren rechten Ecke hinzugefügt. Klicken Sie auf , um dieses Fenster zu erweitern.

Wenn Sie zusätzliche Schriftstärken auswählen möchten ( zB für fett und kursiv ), können Sie auf die Registerkarte Anpassen gehen. Für eine gute Balance zwischen Benutzerfreundlichkeit und Leistung empfehlen wir, maximal drei Schriftstärken zu wählen:

• Regulär
• Kursiv
• Deutlich

Sie können sogar weniger verwenden, wenn Sie die beste Leistung wünschen .

Wenn Sie Ihre Auswahl getroffen haben, gehen Sie zurück zur Registerkarte Einbetten und kopieren Sie den Code zum Einbetten der Schriftart :

Als nächstes müssen Sie diesen Code zum Abschnitt <head> Ihres WordPress-Themes hinzufügen. Sie können dies tun, indem Sie:

• Direktes Bearbeiten der header.php- Datei Ihres Child-Themes ( stellen Sie sicher, dass Sie ein Child-Theme verwenden – andernfalls verschwinden Ihre benutzerdefinierten Schriftarten, wenn Sie Ihr Theme aktualisieren )
• Verwenden eines kostenlosen Plugins wie Kopf- und Fußzeilen einfügen

Nachdem Sie den Code hinzugefügt haben, können Sie Google Fonts in Ihrem CSS verwenden.

Wenn Sie zur Google Fonts-Website zurückkehren, sagt Ihnen Google tatsächlich die CSS-Regeln, die Sie verwenden müssen:

Damit Ihre h2-Tags beispielsweise Ihre neue Roboto-Schriftart verwenden, können Sie zu Erscheinungsbild → Anpassen → Zusätzliches CSS gehen und das folgende Snippet hinzufügen:

h2 {

Schriftfamilie: 'Roboto', serifenlos;

}

So hosten Sie Google Fonts lokal in WordPress mit einem Plugin

Hier ist die letzte Methode für Google Fonts!

Einige Leute ziehen es vor, Google Fonts lokal zu hosten, anstatt sie aus dem CDN von Google zu laden. Das heißt, anstatt sie von einem Link wie „https://fonts.googleapis.com/css?family=Roboto:400,700“ zu laden, können Sie die Dateien auf Ihrem eigenen Server hosten.

Am einfachsten geht das mit einem kostenlosen Plugin namens CAOS für Webfonts.

Nachdem Sie das Plugin installiert und aktiviert haben, können Sie unter Einstellungen → Webfonts optimieren auswählen, welche Schriftarten Sie auf Ihren Server herunterladen möchten:

Sobald Sie dies getan haben, können Sie die Schriftart(en) in Ihrem CSS verwenden ( so als ob Sie die vorherige Methode befolgen würden ).

So fügen Sie Adobe Fonts (Typekit) in WordPress hinzu

Wenn Sie Adobe Fonts in WordPress verwenden möchten, können Sie im Wesentlichen die gleichen Schritte wie bei der manuellen Google Fonts-Methode ausführen. Denken Sie daran, dass der Adobe Fonts-Dienst nur als Teil des Creative Cloud-Abonnements verfügbar ist .

Um zu beginnen, müssen Sie die Adobe Fonts-Website verwenden, um Ihre Schriftarten auszuwählen und ein Webprojekt zu erstellen ( detaillierte Anweisungen hier ).

Im Fenster Schriftarten zu Webprojekt hinzufügen können Sie auswählen, welche Schriftarten eingeschlossen werden sollen:

Dann erhalten Sie von Adobe einen Einbettungscode, genau wie bei Google Fonts:

Nehmen Sie diesen Einbettungscode und fügen Sie ihn Ihrer Site hinzu, indem Sie entweder die header.php- Datei Ihres Child- Themes oder ein Plugin wie Insert Headers and Footers verwenden.

Nachdem Sie die CSS-Datei verlinkt haben, können Sie das von Adobe bereitgestellte CSS verwenden, um die Schriftart auf CSS-Selektoren auf Ihrer Site anzuwenden:

So verwenden Sie @font-face in WordPress

Schließlich zeigen wir Ihnen als letzte Methode die Verwendung von @font-face in WordPress. Das Schöne an dieser Methode ist, dass sie mit buchstäblich jeder Schriftartdatei aus jeder Quelle funktioniert.

Grundsätzlich wird CSS3 @font-face dies erledigen, solange Sie die Schriftartdatei herunterladen können und die Rechte zur Verwendung haben.

Laden Sie zunächst die Schriftartendatei von Ihrer bevorzugten Quelle herunter. In diesem Beispiel verwenden wir eine kostenlose Schriftart von Font Squirrel namens Alex Brush .

Versuchen Sie, wenn möglich, die Datei im Dateiformat .woff oder .woff2 herunterzuladen, um die beste browserübergreifende Kompatibilität zu erzielen . Wenn dies nicht möglich ist, können Sie Ihre Schriftart in einem anderen Format herunterladen und dann das kostenlose FontSquirrel Webfont Generator-Tool verwenden, um sie in .woff zu konvertieren :

Verbinden Sie sich als Nächstes über FTP oder den cPanel-Dateimanager mit dem Server Ihrer WordPress-Site. Dann…

• Erstellen Sie einen neuen Ordner namens fonts im Verzeichnis Ihres aktiven Themes oder Child-Themes ( einige Themes verfügen möglicherweise bereits über einen Fonts- Ordner. Wenn dies der Fall ist, können Sie dies überspringen ).
• Laden Sie die Schriftartendatei in den Schriftartenordner hoch. Sie können sowohl das .woff- als auch das .woff2-Format hochladen

Nachdem Sie die Dateien hochgeladen haben, gehen Sie in Ihrem WordPress-Dashboard zu Erscheinungsbild → Anpassen → Zusätzliches CSS .

Zuerst müssen Sie @font-face verwenden , um Ihre Schriftart hinzuzufügen…

Geben Sie dazu den Namen Ihres Fonts als Font-Familie ein und fügen Sie als URL die direkte URL zur Font-Datei auf Ihrem Server hinzu. So sieht es für unser AlexBrush-Beispiel aus:

@Schriftart {

Schriftfamilie: AlexBrush;

src: url(http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff);

Schriftstärke: normal;

}

Sobald Sie dies getan haben, können Sie CSS verwenden, um Ihre Schriftfamilie anzuwenden ( mit dem Namen, den Sie bei @font-face registriert haben ). So sieht beispielsweise die Verwendung der Schriftart AlexBrush für <h2>-Header aus:

Und das ist es! Sie können diese CSS3-@font-face-Methode für buchstäblich jede Schriftartdatei verwenden.

Abschließende Gedanken zu benutzerdefinierten WordPress-Schriften

Wenn Ihr WordPress-Theme nicht die Schriftarten enthält, die Sie verwenden möchten, keine Panik! Sie haben viele Möglichkeiten, Ihre eigenen benutzerdefinierten WordPress-Schriften hinzuzufügen.

Der einfachste Einstieg ist mit den gehosteten kostenlosen Schriftarten bei Google Fonts oder den gehosteten Premium-Optionen bei Adobe Fonts.

Sie sind jedoch keineswegs auf diese Dienste beschränkt, und mit CSS3 @font-face können Sie buchstäblich jede Schriftartdatei in WordPress hochladen und in Ihrem Theme verwenden.

Gehen Sie jetzt raus und erstellen Sie Ihre eigene Schriftpaarung!