In diesem WordPress-Hilfeartikel führe ich Sie Schritt für Schritt durch den Prozess des Hinzufügens benutzerdefinierter Schriftarten zu Ihren WordPress-Block-Themes. Das bedeutet, dass Sie JEDE Schriftart zu JEDEM Thema hinzufügen können, beispielsweise Google Fonts zum Thema „Twenty Twenty Three“.

Sie können sich das Video-Tutorial unten ansehen oder es überspringen und den Artikel lesen (der mithilfe der Übersetzungsfunktionen auf dieser Seite in mehreren Sprachen verfügbar ist). 

Ich zeige Ihnen, wie Sie diese Aufgabe mit dem Plugin „Create Block Theme“ erledigen, das direkt vom WordPress-Entwicklerteam entwickelt wurde. Dadurch ist das Plugin ultraleicht, leistungsstark und sehr einfach mit Blockthemen zu verwenden. Ich zeige Ihnen auch, wie Sie ein häufiges Berechtigungsproblem lösen, das bei der Arbeit mit diesem Plugin auftreten kann.

Mit dieser Methode können Sie entweder auf Schriftarten verlinken (z. B. auf Google Fonts verlinken) oder Schriftarten lokal auf Ihrer Website einbetten (für eine bessere Leistung der Website). Lasst uns loslegen!

Inhaltsverzeichnis

1. Installieren Sie das Plugin „Create Block Theme“.

Zunächst müssen Sie sich in Ihrem WordPress-Administrationsbereich anmelden, um zum Dashboard zu gelangen. Gehen Sie von dort aus in der Hauptnavigation zu Plugins>Neu hinzufügen (roter Pfeil im Bild oben).

Suchen Sie mithilfe der Suchleiste in der oberen rechten Ecke nach dem Plugin „Create Block Theme“ (auf dem Foto oben grün umrandet). Sobald das Plugin „Block-Theme erstellen“ angezeigt wird, klicken Sie auf die Schaltfläche „Jetzt installieren“, um es auf Ihrer Website zu installieren (roter Pfeil).

Klicken Sie anschließend auf die Schaltfläche „Aktivieren“, um das Plugin zu aktivieren.

Vereinfachter WordPress-Kurs: So erstellen Sie leistungsstarke Websites von Davies Media Design

2. Sicherheits-Plugin deaktivieren (vorübergehend)

Damit der Rest dieses Prozesses reibungslos abläuft, müssen Sie vorübergehend alle von Ihnen installierten Sicherheits-Plugins deaktivieren, die Benutzern die Bearbeitung von Themes oder Plugins blockieren.

In meinem speziellen Fall verwende ich das SG Security-Plugin (das mit allen WordPress-Websites geliefert wird). gehostet über Siteground – ein Host, den ich wärmstens empfehlen kann). Ich weiß mit Sicherheit, dass dieses Plugin den Prozess des Hinzufügens benutzerdefinierter Schriftarten stört, daher deaktiviere ich die Einstellung, die im Weg steht.

In diesem Fall navigiere ich über die Hauptnavigation (roter Pfeil im Bild oben) zum Abschnitt „Site-Sicherheit“ des SG Security-Plugins.

Als Nächstes scrolle ich nach unten zur Option „Themes- und Plugins-Editor deaktivieren“ (im Bild oben grün hervorgehoben). Rechts neben dieser Option sehen Sie einen Schalter. Klicken Sie auf den Schalter, um diese Funktion zu deaktivieren (roter Pfeil). In der rechten Ecke sollte die Meldung „Erfolgreich“ angezeigt werden (blauer Pfeil).

Da unser Sicherheits-Plugin vorübergehend deaktiviert ist, können wir mit dem nächsten Schritt der Auswahl und dem Hochladen der Schriftarten fortfahren, die wir auf unserer Website verwenden möchten.

Es gibt zwei Möglichkeiten, benutzerdefinierte Schriftarten in WordPress zu verwenden.

3. Wählen Sie benutzerdefinierte Schriftarten für WordPress (verknüpfte Google-Schriftarten)

Die erste Möglichkeit besteht darin, auf Schriftarten auf einer Website eines Drittanbieters zu verlinken. Google Fonts. Diese Option ist einfacher und erfordert weniger Zeit zum Einrichten, verlangsamt jedoch die Seitenladegeschwindigkeit Ihrer Website. Außerdem sind Sie auf die von Google Fonts verfügbaren Schriftarten beschränkt (obwohl Google jede Menge tolle, kostenlose Schriftarten anbietet). Wenn Sie weniger technisch versiert sind und die Verwendung von Google Fonts nicht stört, empfehle ich diese Option.

Navigieren Sie zunächst in der Hauptnavigation zu „Darstellung>Themenschriftarten verwalten“ (roter Pfeil im Bild oben).

Im Arbeitsbereich „Themenschriftarten verwalten“ sehen Sie alle derzeit in WordPress installierten Standardschriftarten (im Bild oben grün hervorgehoben). Ihre Schriftarten werden außerdem auf der rechten Seite des Arbeitsbereichs aufgelistet, zusammen mit den verschiedenen Variationen jeder Schriftart und der Dateigröße für jede Schriftartvariation (blau umrandet).

Um Ihrem Design eine neue Schriftart hinzuzufügen, klicken Sie auf die Schaltfläche „Google-Schriftart hinzufügen“ (roter Pfeil).

Klicken Sie auf das Dropdown-Menü „Schriftart auswählen“ und suchen Sie nach der Google-Schriftart, die Sie Ihrer Website hinzufügen möchten (die Schriftarten sind in alphabetischer Reihenfolge). Wenn Sie nicht sicher sind, wie die einzelnen Schriftarten aussehen, empfehle ich sie Durchsuchen der Google Fonts-Website um Schriftarten zu erkunden und auszuprobieren. Wenn Sie die Schriftart gefunden haben, die Sie verwenden möchten, wählen Sie sie aus der Dropdown-Liste (blauer Pfeil) aus.

Sie sehen nun eine Liste aller verfügbaren Varianten, die Sie für diese Schriftart in Ihrem Theme installieren können. Sie können entweder das Kontrollkästchen neben einzelnen Varianten aktivieren oder auf das obere Kontrollkästchen (roter Pfeil im Bild oben) klicken, um alle Varianten auszuwählen. Auf der rechten Seite des Bildschirms wird eine Liste Ihrer ausgewählten Varianten zusammen mit deren Dateigröße angezeigt. Wenn Sie fertig sind, klicken Sie auf „Google-Schriftarten zu Ihrem Design hinzufügen“ (grüner Pfeil).

Oben im Arbeitsbereich sollte nun eine Meldung angezeigt werden, dass die Schriftart für Ihr Design installiert wurde (in diesem Fall für das Design Twenty-Twenty Three). Sie können dann im Erfolgsmeldungsfeld auf den Link „Schriftarten verwalten“ klicken oder auf den kleinen Zurückpfeil (roter Pfeil im Bild oben) klicken, um zum Arbeitsbereich „Designschriftarten verwalten“ zurückzukehren.

Sie sehen nun Ihre neu installierte Schriftfamilie zusammen mit den übrigen Schriftarten Ihres Themes aufgelistet (roter Pfeil im Bild oben). Außerdem sehen Sie Ihre Schriftfamilie und alle dazugehörigen Schriftvarianten auf der rechten Seite des Arbeitsbereichs (grün hervorgehoben).

4. Benutzerdefinierte Schriftarten für WordPress einbetten (lokale Schriftarten für bessere SEO)

Die zweite Möglichkeit zum Hinzufügen von Schriftarten zu Ihrer WordPress-Website besteht darin, Ihre Schriftarten „einzubetten“ oder „lokal zu hosten“. Mit anderen Worten: Ihre Schriftartdateien befinden sich auf demselben Webserver, auf dem auch Ihre Website gehostet wird.

Der Vorteil dieser Methode besteht darin, dass keine Schriftarten von einer Drittanbieterdomäne abgerufen werden müssen. Dadurch werden Ihre Schriftarten schneller geladen und somit wird Ihre Webseite schneller geladen. Das schnellere Laden von Webseiten ist besser für die Benutzererfahrung, was bedeutet, dass es dazu beitragen kann, dass Ihre Website in Suchmaschinen einen höheren Rang einnimmt und mehr Verkehr erhält.

Mit anderen Worten: Eingebettete Schriftarten sind besser für SEO (Suchmaschinenoptimierung).

Obwohl diese Methode ein paar zusätzliche Schritte erfordert, ist sie dennoch recht einfach und verwendet dasselbe Plugin, das wir zuvor installiert haben (Plugin „Create Block Themes“).

Um Ihre Schriftarten lokal zu installieren, navigieren Sie zunächst in der Hauptnavigation zu „Darstellung“ > „Themenschriftarten verwalten“ (falls Sie nicht bereits im letzten Schritt dort waren – blauer Pfeil im Bild oben). Klicken Sie anschließend auf die Schaltfläche „Lokale Schriftart hinzufügen“ in der oberen rechten Ecke des Arbeitsbereichs (roter Pfeil).

Sie werden zum Bereich „Lokale Schriftarten“ weitergeleitet, wo Sie eine Datei von Ihrem Computer auswählen können, um sie in Ihr Design hochzuladen. Unter der Schaltfläche „Datei auswählen“ sehen Sie eine Liste der unterstützten Schriftartdateiformate. Sie können diese Formate von jeder vertrauenswürdigen Schriftarten-Website herunterladen, einschließlich Google Fonts.

Finden und laden Sie die Schriftart Ihrer Wahl bei Google Fonts herunter

Ich gehe zu Google Fonts und suche mithilfe der Suchleiste (roter Pfeil) nach der gewünschten Schriftart – in diesem Fall nach der Schriftart „Catamaran“. Sobald die Schriftart in den Ergebnissen aufgeführt ist, klicke ich darauf, um die Schriftartenseite anzuzeigen (grüner Pfeil).

Als nächstes klicke ich auf die Schaltfläche „Familie herunterladen“, um diese Schriftart und alle ihre Variationen auf meinen Computer herunterzuladen. Sie können auf der Schriftartenseite nach unten scrollen, wenn Sie alle verfügbaren Variationen dieser Schriftart sehen möchten.

Klicken Sie auf „Speichern“, um die Schriftart-ZIP-Datei auf Ihrem Computer zu speichern.

Entpacken Sie Ihren Schriftartenordner, um auf Schriftartendateien zuzugreifen

Sobald der Download abgeschlossen ist, klicken Sie auf den Pfeil neben dem fertigen Download (roter Pfeil) und dann auf „Im Ordner anzeigen“ (grüner Pfeil).

Klicken Sie in Ihrem Datei-Explorer mit der rechten Maustaste auf die ZIP-Datei und klicken Sie auf „Alle extrahieren“.

Es erscheint ein Popup-Fenster, das Ihnen zeigt, wo die Schriftarten extrahiert werden (roter Pfeil). Sie können diesen Speicherort bei Bedarf ändern, andernfalls klicken Sie auf die Schaltfläche „Extrahieren“ (grüner Pfeil). Dadurch wird der Ordner entpackt und auf Ihrem Computer eine neue Datei mit allen entpackten Schriftartdateien erstellt. Dieser Ordner sollte automatisch geöffnet werden.

Wenn Sie Schriftartendateien mit Google Fonts heruntergeladen haben, geben Sie den Ordner mit der Bezeichnung „statisch“ ein, um alle Ihre Schriftartendateien anzuzeigen. Andernfalls suchen Sie einfach nach Dateien, bei denen es sich um OTF-, TTF-, WOFF- oder WOFF2-Dateien handelt.

In diesem „statischen“ Ordner sehen Sie eine Liste aller Schriftartenvarianten, die wir für die Schriftart „Catamaran“ von Google Fonts heruntergeladen haben. Insgesamt gibt es 9 Variationen, und wir können entweder alle auf unsere Website hochladen oder nur die Variationen, die wir wollen/brauchen. Klicken Sie im Datei-Explorer auf den Speicherort des Ordners (grüner Pfeil), klicken Sie dann mit der rechten Maustaste und wählen Sie „Kopieren“.

Laden Sie Ihre benutzerdefinierten Schriftarten auf WordPress hoch

Navigieren Sie zurück zu WordPress, wo der Arbeitsbereich „Lokale Schriftarten“ geöffnet ist. Klicken Sie auf die Schaltfläche „Datei auswählen“ (roter Pfeil im Bild oben), um Ihre Schriftarten auszuwählen. Sie können manuell zu dem Speicherort auf Ihrem Computer navigieren, an dem Ihre Schriftarten gespeichert sind. Oder klicken Sie einfach auf die Adressleiste des Datei-Explorers (blauer Pfeil), löschen Sie die aktuell dort vorhandene Adresse, klicken Sie dann mit der rechten Maustaste und wählen Sie „Einfügen“ (grüner Pfeil). Dadurch wird die Adresse eingefügt, die Sie im vorherigen Schritt kopiert haben. Drücken Sie die Eingabetaste und Sie werden zum Ordner mit Ihren Schriftarten weitergeleitet.

Sie müssen Ihre Schriftartvariationen einzeln hochladen. Für dieses Beispiel lade ich einfach die Schriftartvariante „Catamaran-Regular“ hoch, indem ich darauf klicke (grüner Pfeil) und dann auf die Schaltfläche „Öffnen“ (roter Pfeil) klicke.

Sie sollten nun Informationen zu „SCHRIFTARTNAME“, „SCHRIFTSTIL“ und „SCHRIFTSTICHT“ sowie eine Vorschau der Schriftart auf der rechten Seite sehen. Klicken Sie auf „Schriftart zu Ihrem Design hochladen“ (roter Pfeil), um die Schriftartenvariante hochzuladen.

Sehen Sie sich Ihre benutzerdefinierten Design-Schriftarten an

Sie sollten nun oben im Arbeitsbereich eine Erfolgsmeldung sehen (im Bild oben grün umrandet). Herzlichen Glückwunsch – Ihre benutzerdefinierte Schriftart ist jetzt als lokale Schriftart in Ihr Design hochgeladen! Sie können weiterhin auf „Datei auswählen“ klicken und so viele Schriftartvarianten hochladen, wie Sie möchten.

Wenn Sie fertig sind, klicken Sie im Erfolgsmeldungsfeld auf den Link „Schriftarten verwalten“ oder auf den Zurück-Pfeil (gekennzeichnet durch den roten Pfeil), um zum Arbeitsbereich „Designschriftarten verwalten“ zurückzukehren.

Sie sehen nun die neue Schriftfamilie „Catamaran“ zusammen mit den übrigen Schriftfamilien Ihres Themes (roter Pfeil). Außerdem sehen Sie die Schriftfamilie und alle Variationen, die Sie installiert haben, auf der rechten Seite des Fensters „Themenschriftarten verwalten“ (grün hervorgehoben).

5. Ändern Sie die Schriftarten Ihres Themes in Ihre benutzerdefinierten Schriftarten

Nachdem Sie nun Ihre neuen Schriftarten installiert haben, ist es Zeit für den spaßigen Teil!

Um die Schriftarten Ihres Themes in Ihre benutzerdefinierten Schriftarten zu ändern, navigieren Sie zum Site-Editor, indem Sie auf „Darstellung“ > „Editor“ gehen (roter Pfeil im Bild oben).

Klicken Sie irgendwo in den Hauptinhaltsbereich (roter Pfeil) des Site-Editors, um die Steuerelemente aufzurufen.

Klicken Sie im oberen Menü auf das Symbol „Stile“ (blauer Pfeil). Klicken Sie dann auf „Typografie“ (roter Pfeil).

Unter „Elemente“ können Sie die Schriftart für den Text, Links, Überschriften oder Schaltflächen ändern. Für dieses Beispiel wähle ich die Option „Überschriften“.

Sie sehen nun unter „Typografie“ ein Dropdown-Menü, in dem Sie eine Ihrer Theme-Schriftarten auswählen können (roter Pfeil). Die Schriftarten „Neuton“ und „Catamaran“, die ich für dieses Tutorial hinzugefügt habe, sind hier aufgelistet. Ich wähle „Neuton“ als Schriftart für meine Überschrift.

Klicken Sie oben rechts auf die Schaltfläche „Speichern“, um Ihre Änderungen zu speichern.

Klicken Sie noch einmal auf „Speichern“ (roter Pfeil), und Ihre benutzerdefinierte Schriftart wird nun für alle Überschriften auf Ihrer Website gespeichert!

Als Nächstes können Sie auf den Link „Ansicht“ > „Site anzeigen“ in der oberen rechten Ecke des Site-Editors klicken (rote Pfeile im obigen Foto), um zu sehen, wie Ihre Website mit Ihrer neuen Schriftart aussieht. Kehren Sie zum Site-Editor zurück und wiederholen Sie diesen Vorgang für alle anderen Elemente, deren Schriftart Sie anpassen möchten.

Um zum WordPress-Administratorbereich zurückzukehren, klicken Sie auf das Logo in der oberen linken Ecke des Site-Editors (grüner Pfeil) und dann erneut auf das Logo.

6. So löschen Sie benutzerdefinierte Schriftarten aus WordPress

Um eine Ihrer benutzerdefinierten Schriftarten zu löschen, navigieren Sie zunächst zurück zu „Darstellung“ > „Designschriftarten verwalten“.

Sie können die gesamte Schriftfamilie löschen, indem Sie mit der Maus über die rechte Seite des Namens der Schriftfamilie fahren und auf das angezeigte Papierkorbsymbol (blauer Pfeil) klicken. Oder fahren Sie mit der Maus über einzelne Schriftartvariationen und klicken Sie auf das Papierkorbsymbol (die Schriftartvariationen befinden sich im grün hervorgehobenen Bereich). Sie können auch auf den Link „Schriftfamilie entfernen“ klicken, um eine beliebige Schriftfamilie zu löschen (lila Pfeil).

Das war's für dieses Tutorial! Wenn es dir gefallen hat, kannst du dir meine anderen ansehen WordPress-Hilfeartikel oder melden Sie sich bei mir an WordPress-Meisterkurs auf Udemy.

Pin It auf Pinterest