Schriftgrößen im WordPress Block Editor (Gutenberg) anpassen oder deaktivieren
Für Textabsätze bietet der Block Editor von WordPress die Möglichkeit Schriftgrößen zu verändern. Die vordefinierten Optionen lassen sich beliebig anpassen.

Für Textabschnitte stellt der Block Editor von WordPress die Möglichkeit zur Verfügung, die Schriftgröße zu verändern. Die auswählbaren Optionen lassen sich beliebig anpassen. Von Haus aus bietet WordPress fünf festgelegte Schriftgrößen an, sowie die Möglichkeit einen individuellen Wert anzugeben. Für den Fall, dass ihr das zur Verfügung stehende Werkzeug für euer Theme anpassen möchtet, zeigen wir euch, wie ihr Optionen deaktivieren oder eine Auswahl mit eigenen Größen registrieren könnt.
Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
Schriftgrößen im Block Editor deaktivieren
Wenn ihr keine Veränderung von Schriftgrößen im Editor erlauben, diese also ausschließlich über das Stylesheet eures Themes steuern möchtet, könnt ihr die Typografie-Optionen, analog zum Entfernen der Farbpalette, mit folgendem Code vollständig deaktivieren. Der Code wird in der functions.php
eingefügt.
function disable_font_sizes() {
add_theme_support('editor-font-sizes', array());
add_theme_support('disable-custom-font-sizes');
}
add_action('after_setup_theme', 'disable_font_sizes');
Eigene Schriftgrößen anlegen
Um eine eigene Auswahl an Schriftgrößen zu registrieren, übergebt ihr der Funktion add_theme_support()
den Namen des Features 'editor-font-sizes'
, sowie ein Array mit den Schriftgrößen. Die Informationen zu den jeweiligen Größen stehen in assoziativen Arrays, in denen ihr jeweils Name, Slug und die Größe in Pixel festlegt. Der Name wird dabei als Info im WordPress Editor angezeigt. Aus dem Slug generiert WordPress eine CSS-Klasse, über die ihr die Schriftgröße in der style.css
eures Themes definieren könnt. In der Editor-Vorschau wird die angegebene Größe verwendet.
function customize_font_sizes() {
add_theme_support('editor-font-sizes', array(
array(
'name' => 'Small',
'slug' => 'small',
'size' => 12,
),
array(
'name' => 'Medium',
'slug' => 'medium',
'size' => 20,
),
array(
'name' => 'Large',
'slug' => 'large',
'size' => 30,
),
));
}
add_action('after_setup_theme', 'customize_font_sizes');
Die vordefinierten Schriftgrößen von WordPress werden damit nicht ergänzt, sondern überschrieben.

Option für individuelle Schriftgröße deaktivieren
Standardmäßig enthält WordPress neben den festgelegten Schriftgrößen die Option eine individuelle Größe anzugeben. Wenn ihr die Auswahl auf die vordefinierten Größen beschränken möchtet, könnt ihr diese Option deaktivieren, indem ihr die Funktion customize_font_sizes()
um die Zeile add_theme_support('disable-custom-font-sizes');
ergänzt.
function disable_custom_font_sizes() {
// …
add_theme_support('disable-custom-font-sizes');
}
add_action('after_setup_theme', 'disable_custom_font_sizes');
Schriftgrößen im CSS definieren
Für die zur Auswahl stehenden Schriftgrößen werden CSS-Klassen nach dem Muster has-$slug-font-size
generiert und dem Block hinzugefügt. Diese Klassen könnt ihr jetzt im CSS beliebig stylen. Für die drei Größen aus unserem Beispiel sieht das beispielsweise so aus:
.has-small-font-size { font-size: 12px; }
.has-medium-font-size { font-size: 20px; }
.has-large-font-size { font-size: 30px; }
Feedback & Ergänzungen – 2 Kommentare
Kommentar zu dieser Seite
WordPress-Projekte mit kulturbanause
Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.
WordPress-Leistungsangebot →Schulungen von kulturbanause
Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.
Übersicht Schulungsthemen →
Also ich versuche eigentlich lieber das meiste an Einstellungen über CSS seitenweit festzulegen.
Das macht es bei vielen Inhalten einfacher.
Natürlich kann man auch die Optionen in WordPress selbst nutzen. Gerade für Programmier-Laien eine gute Möglichkeit.
VG
Ronny
Danke dafür. Das ist gar keine schlechte Möglichkeit um dem Kunden nur das machen zu lassen, was auch vom Entwickler abgesegnet ist. :-)