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.
Sobald Sie im Site-Editor sind, suchen Sie nach dem Symbol Stile oben rechts auf dem Bildschirm.
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.
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.
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.
In den meisten Themen sind standardmäßig mehrere Schriftarten verfügbar.
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.
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:
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.
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:
Scrollen Sie dann zum Ende der Seite und laden Sie das ausgewählte Schriftartenpaket herunter.
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:
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.
