Individuelle Schriftgrößen im WordPress-Editor mit CSS anpassen

Für einige Blöcke kann man in der Randspalte eine individuelle Schriftgröße festlegen. Das betrifft den Absatzblock, aber auch für Headlines kann man die Schriftgröße ändern.

Damit kannst du beispielsweise einen Absatz hervorheben oder eine Überschrift einen Tick kleiner machen.

Dieser Absatz ist 36 Pixel groß.

Nicht ganz so praktisch ist, dass die individuelle Schriftgröße sich nicht anpasst. Wenn es im Theme-CSS nicht anders angegeben ist, bleibt der Absatz im Beispiel oben immer 36px groß. Auf dem großen Monitor sieht das ok aus, auf dem Smartphone wirkt die Schrift zu groß.

Schriftgrößen verändern

Die Darstellung der individuellen Schriftgrößen wird durch CSS-Klassen gesteuert. Der Absatz oben hat die CSS-Klasse has-large-font-size. Dieser Klasse ist in der Datei gutenberg/build/block-library/style.css die Schriftgröße 2.25em zugeordnet.

Die Klassen sind nach diesem Schema aufgebaut has-[name]-font-size. Über diese Klassen kann ich im Theme-CSS die Schriftgröße ansprechen und verändern:

.has-large-font-size {
  font-size: 30px;
}Code-Sprache: CSS (css)

Über Mediaqueries kann ich erreichen, dass die Schriftgröße sich der Bildschirmbreite anpasst. Die mittlere Schriftgröße wird jetzt auf dem Smartphone kleiner dargestellt. Damit bleiben die Texte lesbar und der Platz wird besser ausgenutzt.

.has-medium-font-size {
  font-size: 18px;
}

@media (min-width:600px){
 .has-medium-font-size {
   font-size: 20px;
 }
}Code-Sprache: CSS (css)

Eigene Schriftgrößen definieren

Der Editor bringt ein Set aus Voreinstellungen mit. Du kannst die individuellen Schriftgrößen aber auch komplett selbst festlegen. Dabei kannst du sowohl die Namen als auch die Größen angeben. Auf diese Weise lassen sich die individuellen Schriftgrößen in die typografische Systematik des Themes einbinden.
Hier definiere ich drei Varianten:

function ks_custom_font_sizes() {
   add_theme_support('editor-font-sizes', array(
      array(
         'name' => 'Small',
         'slug' => 'small',
         'size' => 14,
      ),
      array(
         'name' => 'Medium',
         'slug' => 'medium',
         'size' => 20,
      ),
      array(
         'name' => 'Large',
         'slug' => 'large',
         'size' => 30,
      ),
   ));
}
add_action('after_setup_theme', 'ks_custom_font_sizes');Code-Sprache: PHP (php)

Schriftgrößen deaktivieren

Die individuellen Schriftgrößen lassen sich auch ganz abschalten. Bei komplexen Seiten bringen zu viele Schriftgrößen Unruhe ins Schriftbild. Da ist es besser, wenn nur die Schriftgrößen verwendet werden, die im Theme-CSS definiert sind.

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');Code-Sprache: PHP (php)

Fazit

Dass man die Schriftgröße im Editor verändern kann, kann durchaus praktisch sein. Es kann aber sein, dass die Schriftgröße sich nicht anpasst, wenn der Bildschirm kleiner wird. Damit das passiert, müssen im Theme-CSS die entsprechenden Angaben dazu stehen.

Wenn du also mit individuellen Schriftgrößen arbeiten möchtest, solltest du nachschauen, wie sich die Schriftgrößen in deinem Theme verhalten und eventuell nacharbeiten.

Bei Kundenprojekten tendiere ich dazu, die individuellen Schriftgrößen ganz zu deaktivieren.