Home » WordPress » Ändern oder Hinzufügen von Schriftarten in aktuellen WordPress-Themes (einschließlich Google Fonts)

Ändern oder Hinzufügen von Schriftarten in aktuellen WordPress-Themes (einschließlich Google Fonts)

Wenn Sie gerade erst mit WordPress anfangen oder noch nie ein FSE-Theme (Full Site Editor) verwendet haben, sind Sie vielleicht überwältigt von der Anzahl der Vorlagen, Muster und Einstellungen, die Sie kontrollieren können. Und die Wahrscheinlichkeit ist groß, dass Sie gar nicht bemerken, dass FSE-Themes eine ganze Reihe von Farb- und Schrifteinstellungen von Haus aus zur Verfügung stellen.

Das Tolle ist, dass die meisten Styling-Einstellungen gut organisiert sind und Sie sie alle in einem Panel finden können. Sehen wir uns an, wie die Schrifteinstellungen in WordPress aussehen.

Wie man die Schriftarten in WordPress ändert

Um auf die Schrifteinstellungen in WordPress Full Site Editor Themes zuzugreifen, müssen Sie den Site Editor öffnen. Gehen Sie dazu im WordPress-Administrationsbereich auf Darstellung >> Editor oder klicken Sie auf Site bearbeiten, während Sie Ihre Website als Besucher besuchen.

how to change font in wordpress

Sobald Sie im Site-Editor sind, suchen Sie nach dem Symbol Stile oben rechts auf dem Bildschirm.

how to change wordpress typography

Nachdem Sie auf Stile geklickt haben, sehen Sie alle verfügbaren globalen Styling-Einstellungen für Ihr aktuelles Theme. Klicken Sie auf Typografie, um die Schrifteinstellungen zu überprüfen.

how to update wordpress fonts

Im Standard-WordPress-Theme können Sie verschiedene Schriftarten für Text, Links, Überschriften und Schaltflächen festlegen. Klicken Sie auf eine dieser Schriften, um ihre Standardeinstellungen zu ändern.

Nur zur Erinnerung: Bei Bedarf können Sie diese Einstellungen in jedem Block überschreiben, während Sie Seiten oder Beiträge bearbeiten. Und machen Sie sich keine Gedanken über die Änderung der globalen Einstellungen, wenn Sie bereits benutzerdefinierte Schrifteinstellungen in bestehenden Beiträgen haben. Die globalen Einstellungen setzen Ihre benutzerdefinierten Schriftarten nicht zurück.

wordpress how to change font

Wenn Sie eines der Elemente im Abschnitt Typografie auswählen, können Sie die Schriftfamilie, die Schriftgröße, das Aussehen (fett, kursiv usw.) und die Zeilenhöhe ändern.

wordpress how to change font family

In den meisten Themen sind standardmäßig mehrere Schriftarten verfügbar.

wordpress changing font family

Sobald Sie die Schriftart in den Typografie-Einstellungen ändern, sehen Sie das Ergebnis sofort. Auf der linken Seite des Website-Editors werden die Schriftarten und alle anderen Einstellungen, die Sie dort bearbeiten, aktualisiert, noch bevor Sie die Änderungen speichern.

change wordpress font

Sobald Sie auf die Schaltfläche Speichern klicken, werden die Einstellungen für die Schriftart der Website aktiviert.

Wie man Schriftarten zum WordPress Full Site Editor hinzufügt

Die alten Methoden, Schriftarten direkt in die style.css-Datei des Themes oder durch Hinzufügen von benutzerdefiniertem CSS hinzuzufügen, funktionieren zwar für Website-Besucher, aber Sie können die Seiten mit der richtigen Schriftart nicht im Adminbereich anzeigen. Es ist also nicht die richtige Lösung für FSE-basierte Themes.

Die gute Nachricht ist, dass Sie mit WordPress ganz einfach Schriftarten zu den Theme-Einstellungen hinzufügen können. Klicken Sie dazu auf Tools >> Theme File Editor im WordPress Admin Menü. Klicken Sie dann auf die Datei theme.json auf der rechten Seite und suchen Sie im Code der Datei nach FontFamilies.

Sie haben wahrscheinlich schon bemerkt, wie verschiedene Schriftarten im Theme definiert sind. Um eine zusätzliche Schriftart zum WordPress-Theme hinzuzufügen, müssen Sie eine zusätzliche fontFace zu diesen Einstellungen hinzufügen.

Hier ist das Beispiel, wie man die Schriftart Georgia zu einem auf dem Full Site Editor basierenden Theme hinzufügt:

{
    "fontFamily": "Georgia",
	"name": "Georgia",
	"slug": "georgia"
},

Hier sollten Sie den Code hinzufügen:

how to add additional fonts to full site editor in wordpress

Sobald Sie die Schriftart hinzugefügt haben, kann sie sowohl in den Hauptstileinstellungen als auch in den benutzerdefinierten Blockeinstellungen verwendet werden. Sie wird auch in der Vorschau angezeigt, während Sie den Inhalt Ihrer Website bearbeiten.

how to add fonts to wordpress

So fügen Sie Google-Schriftarten mit einigen Schriftschnitten zum WordPress Full Site Editor hinzu

Möchten Sie dem WordPress Full Site Editor ein paar verschiedene Schriftschnitte von Google hinzufügen? Sie können dies im gleichen Tools >> Theme File Editor tun, indem Sie eine Schriftfamilie mit ein paar mehr Details hinzufügen.

Aber bevor Sie eine bestimmte Google-Schriftart zu WordPress hinzufügen, müssen Sie diese Schriftartdateien herunterladen. Dafür können Sie das Google Webfonts Hilfstool verwenden. Hier ist das Beispiel mit der Schriftart Monsterrat. Wählen Sie zunächst die gewünschten Schriftschnitte und -stile aus:

how to download google font to your computer

Scrollen Sie dann zum Ende der Seite und laden Sie das ausgewählte Schriftartenpaket herunter.

download google fonts to use in wordpress theme

Extrahieren Sie die heruntergeladenen Schriften und laden Sie sie mit Filezilla oder einem ähnlichen FTP-Client in den Ordner /fonts in Ihrem WordPress-Theme hoch.

Sobald die Dateien an ihrem Platz sind, müssen Sie die Google-Schriftartfamilie über Tools >> Theme File Editor in die Datei theme.json einfügen.

Hier ist ein Beispiel, das ich in meinem Frost-Theme verwendet habe, um mehrere Schriftarten von Google Font in WordPress hinzuzufügen. Sie können es direkt nach „fontFamilies“ hinzufügen : [ Zeile:

{
					"fontFace": [
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-regular.woff2"
							]
						},
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "italic",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-italic.woff2"
							]
						},
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "500",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-500.woff2.woff2"
							]
						},
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "600",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-600.woff2.woff2"
							]
						},
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "700",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-700.woff2.woff2"
							]
						}
					],
					"fontFamily": ""Montserrat", sans-serif",
					"name": "Montserrat",
					"slug": "montserrat"
				},

Hier ist der Screenshot:

how to add multiple weights of Google font in Full Site Editor theme's theme.json file in wordpress

Das war’s. Sie sollten jetzt in der Lage sein, Google Font in WordPress zu verwenden und zu sehen, wie es direkt im WordPress-Editor aussieht.

Wenn Sie nach einer einfacheren Implementierung von Google Fonts in WordPress suchen (ohne Vorschau im Editor), können Sie sich meinen anderen Artikel ansehen wie man Google Fonts lokal in WordPress hinzufügt.

Tags:

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK