So ändern Sie die Schriftgröße in WordPress: Gutenberg, Plugins, CSS und Theme Customizer

Das Ändern der Schriftgröße in WordPress bedeutet, die typografische Skalierung der Textelemente Ihrer Website anzupassen — Überschriften, Fließtext, Bildunterschriften und Navigationsbezeichnungen — entweder auf Block-Ebene, Theme-Ebene oder global über CSS. Die gewählte Methode bestimmt den Umfang der Änderung: ein einzelner Absatz, ein Inhaltstyp auf allen Seiten oder jedes Textelement der gesamten Website.

Dieser Leitfaden behandelt jede praktische Methode, die in einer modernen WordPress-Installation verfügbar ist, einschließlich des Gutenberg-Block-Editors, Typography-Plugins, des nativen Theme-Customizers und direkter CSS-Überschreibungen. Jeder Ansatz hat einen bestimmten Anwendungsfall, und die Wahl der falschen Methode erzeugt technische Schulden, die sich mit der Zeit häufen.

Warum Schriftgrößen-Entscheidungen technischer sind, als sie erscheinen

Typografie ist keine kosmetische Angelegenheit. Die Schriftgröße beeinflusst direkt die Core Web Vitals-Werte, insbesondere die Cumulative Layout Shift (CLS)-Metrik, wenn Schriften asynchron geladen werden, und den Largest Contentful Paint (LCP), wenn großer Überschriftentext das primäre Viewport-Element ist. Schlecht abgegrenzte font-size-Regeln — zum Beispiel das Anwenden von font-size auf das body-Element ohne Berücksichtigung der em-basierten Vererbung — kaskadieren unvorhersehbar durch untergeordnete Elemente und beeinträchtigen Abstände, Zeilenhöhenverhältnisse und Komponentenlayouts.

Wenn Sie WordPress in einer VPS Hosting-Umgebung mit Root-Zugriff betreiben, haben Sie die zusätzliche Möglichkeit, Theme-Dateien direkt zu bearbeiten und Caching-Ebenen zu verwalten, die beeinflussen, wie CSS-Änderungen an Endbenutzer weitergegeben werden. Dieses Maß an Kontrolle ist auf gemeinsam genutzter Infrastruktur nicht verfügbar, was die Methodenauswahl noch wichtiger macht.

Vergleich: Alle vier Methoden auf einen Blick

Verwenden Sie diese Tabelle als Entscheidungsmatrix, bevor Sie eine Einstellung ändern. Die richtige Methode hängt vom Umfang, Ihrem technischen Kenntnisstand und davon ab, ob Sie an einem Child-Theme arbeiten.

Methode 1: Gutenberg Block Editor

Der Gutenberg Block Editor, der in WordPress 5.0 eingeführt wurde, verwaltet die Schriftgröße auf der Ebene einzelner Blöcke. Dies ist der richtige Ansatz, wenn Sie die Größe eines bestimmten Absatzes, einer Überschrift oder einer Gruppe von Elementen anpassen müssen, ohne globale Stile zu berühren.

Schritt-für-Schritt: Schriftgröße in einem Block anpassen

1. Melden Sie sich in Ihrem WordPress-Dashboard an und öffnen Sie den Beitrag oder die Seite, die Sie bearbeiten möchten.
2. Klicken Sie auf den Textblock, den Sie ändern möchten — in der Regel ein Absatz-, Überschriften– oder Listen-Block.
3. Suchen Sie in der rechten Seitenleiste den Tab Block (nicht den Tab Dokument). Wenn die Seitenleiste ausgeblendet ist, klicken Sie auf das Zahnrad-Symbol in der oberen rechten Symbolleiste, um sie einzublenden.
4. Scrollen Sie im Block-Einstellungsbereich nach unten zum Abschnitt Typografie.
5. Sie sehen voreingestellte Größenoptionen: Klein, Mittel, Groß und Extra Groß. Diese Werte werden durch die theme.json-Datei Ihres aktiven Themes definiert.
6. Um einen genauen Wert festzulegen, klicken Sie auf die Option Benutzerdefiniert und geben Sie eine Größe in Pixeln ein (z. B. 18px) oder verwenden Sie relative Einheiten wie rem (z. B. 1.125rem).
7. Klicken Sie auf Aktualisieren oder Veröffentlichen, um zu speichern.

Verwendung von theme.json zur Definition benutzerdefinierter Voreinstellungen (WordPress 5.8+)

Wenn Sie ein Block-Theme oder ein klassisches Theme mit einer theme.json-Datei verwalten, können Sie die genauen voreingestellten Größen definieren, die in der Editor-Seitenleiste erscheinen. Dies ist der wartungsfreundlichste Ansatz für Entwicklungsumgebungen.

{
  "settings": {
    "typography": {
      "fontSizes": [
        { "name": "Small", "slug": "small", "size": "14px" },
        { "name": "Regular", "slug": "regular", "size": "16px" },
        { "name": "Large", "slug": "large", "size": "22px" },
        { "name": "Extra Large", "slug": "x-large", "size": "32px" }
      ]
    }
  }
}

Wenn Sie dies im Stammverzeichnis Ihres Child-Themes platzieren, bleiben die Voreinstellungen bei Theme-Updates erhalten und sind für jeden Editor auf der Website zugänglich, ohne CSS-Kenntnisse zu erfordern.

Sonderfall: Konflikt zwischen Block-Schriftgröße und globalen Stilen

Ein häufiges Problem tritt auf, wenn ein Block eine explizite Schriftgröße über den Editor gesetzt hat, das globale Stylesheet des Themes jedoch dasselbe Element mit einer CSS-Regel höherer Spezifität anspricht. Der Block-Editor fügt Inline-Stile wie style="font-size:22px" ein, die in der Regel die meisten Stylesheet-Regeln überschreiben. Wenn ein Theme jedoch !important-Deklarationen in seinem CSS verwendet, verliert der Inline-Stil. Überprüfen Sie immer das gerenderte Element in den Browser-DevTools, um zu bestätigen, welche Regel gilt.

Methode 2: Typography Plugins

Plugins sind die richtige Wahl, wenn Sie seitenweite typografische Kontrolle benötigen, ohne CSS manuell schreiben zu müssen. Sie sind besonders nützlich für Nicht-Entwickler, die Websites auf Managed Hosting oder VPS mit cPanel verwalten, wo direkter Dateizugriff weniger üblich ist.

Empfohlenes Plugin: Easy Google Fonts

Easy Google Fonts integriert sich direkt in den WordPress Customizer und gibt Ihnen eine Schriftgrößenkontrolle pro Element für die gesamte Website.

Installation und Konfiguration:

1. Navigieren Sie in Ihrem WordPress-Dashboard zu Plugins > Neu hinzufügen.
2. Suchen Sie nach Easy Google Fonts und klicken Sie auf Jetzt installieren, dann auf Aktivieren.
3. Gehen Sie zu Design > Anpassen.
4. Wählen Sie Typografie aus dem Customizer-Menü.
5. Wählen Sie das Element, das Sie ändern möchten: Body, Überschriften (H1–H6), Absätze oder einen benutzerdefinierten Selektor, den Sie definieren.
6. Verwenden Sie den Schriftgröße-Schieberegler oder das Eingabefeld, um den Wert festzulegen.
7. Klicken Sie auf Veröffentlichen, um Änderungen live zu übernehmen.

Alternatives Plugin: Fonts Plugin | Google Fonts Typography

Dieses Plugin bietet eine detailliertere Oberfläche und unterstützt variable Schriften, die für leistungsoptimierte Websites zunehmend relevant sind. Variable Schriften reduzieren HTTP-Anfragen, indem sie eine einzelne Schriftdatei bereitstellen, die mehrere Gewichtungen und Stile abdeckt.

Wichtige Warnung: Plugin-Konflikte mit Block-Themes

Wenn Sie ein Full Site Editing (FSE)-Block-Theme verwenden (wie Twenty Twenty-Three oder Twenty Twenty-Four), können Typography-Plugins, die CSS über wp_enqueue_style in den <head> einfügen, mit den globalen Stilen des Themes in Konflikt geraten, die in theme.json definiert sind. Das Ergebnis sind unvorhersehbare Spezifitätskonflikte. Verwenden Sie in FSE-Umgebungen den Website-Editor (Design > Editor) für globale Typografieänderungen anstelle eines Plugins.

Methode 3: Theme Customizer

Der WordPress Theme Customizer (Appearance > Customize) ist die integrierte Oberfläche für Theme-Ebene-Anpassungen. Nicht alle Themes bieten hier Typografie-Steuerelemente — es hängt vollständig davon ab, was der Theme-Entwickler über die WordPress Customizer API registriert hat.

Schritt-für-Schritt: Schriftgröße über den Customizer anpassen

1. Gehen Sie in Ihrem WordPress-Dashboard zu Design > Anpassen.
2. Suchen Sie im linken Bereich nach einem Abschnitt Typografie, Schriften oder Text. Wenn kein solcher Abschnitt vorhanden ist, unterstützt Ihr Theme dies nicht nativ.
3. Wählen Sie den Elementtyp: Fließtext, H1, H2, Navigation, Footer usw.
4. Passen Sie die Schriftgröße mit dem bereitgestellten Schieberegler oder der numerischen Eingabe an.
5. Die Live-Vorschau auf der rechten Seite wird in Echtzeit aktualisiert.
6. Klicken Sie auf Veröffentlichen, um die Änderungen zu speichern.

Wichtige Einschränkung: Theme Customizer-Einstellungen sind nicht portierbar

Customizer-Einstellungen werden in der WordPress-Datenbank als Theme-Modifikationen (theme_mods) gespeichert. Wenn Sie das Theme wechseln, gehen alle Customizer-basierten Schriftgrößenänderungen verloren. Sie sind auch nicht über Standard-Export-Tools übertragbar, es sei denn, Sie verwenden ein Plugin, das speziell für die Migration von Customizer-Daten entwickelt wurde. Dies ist ein wichtiger Aspekt bei der Planung einer Theme-Migration auf Produktionswebsites.

Methode 4: Benutzerdefiniertes CSS

Benutzerdefiniertes CSS ist die präziseste und flexibelste Methode. Es ist geeignet, wenn die anderen drei Methoden das spezifische Element, das Sie benötigen, nicht ansprechen können, oder wenn Sie responsive Schriftgrößen mit Media Queries anwenden müssen.

CSS über den Customizer hinzufügen (ohne Dateibearbeitung)

1. Gehen Sie zu Design > Anpassen > Zusätzliches CSS.
2. Geben Sie Ihre CSS-Regeln direkt in den Editor ein.
3. Klicken Sie auf Veröffentlichen.

Dieser Ansatz speichert das CSS in der Datenbank und ist für Nicht-Entwickler sicher. Er hat jedoch eine Größenbeschränkung und unterstützt keine Präprozessoren wie Sass.

Bestimmte Elemente mit CSS ansprechen

/* Set base body font size */
body {
  font-size: 17px;
  line-height: 1.7;
}

/* Override heading sizes */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* Target a specific Gutenberg block class */
.wp-block-paragraph.is-style-lead {
  font-size: 1.25rem;
}

Responsive Schriftgrößen mit clamp()

Modernes CSS unterstützt flüssige Typografie mit der clamp()-Funktion, die den Bedarf an mehreren Media-Query-Breakpoints eliminiert:

body {
  font-size: clamp(15px, 1.5vw, 18px);
}

h1 {
  font-size: clamp(28px, 5vw, 56px);
}

Dieser Ansatz skaliert die Schriftgröße gleichmäßig zwischen einem Mindest- und Höchstwert basierend auf der Viewport-Breite. Es ist die aktuelle Best Practice für responsive Typografie und wird von allen modernen Browsern unterstützt.

Theme-Dateien direkt bearbeiten (Child-Theme erforderlich)

Wenn Sie CSS dauerhaft zum Stylesheet des Themes hinzufügen und den Datenbank-Overhead des Additional CSS-Feldes vermeiden möchten, fügen Sie Regeln zur style.css-Datei Ihres Child-Themes hinzu. Bearbeiten Sie niemals die Dateien des übergeordneten Themes direkt — Updates überschreiben Ihre Änderungen.

Auf einem Server mit SSH-Zugriff können Sie die Datei direkt bearbeiten:

nano /var/www/html/wp-content/themes/your-child-theme/style.css

Leeren Sie nach dem Speichern Ihren serverseitigen Cache und jeden CDN-Cache, um sicherzustellen, dass die aktualisierten Stile den Besuchern bereitgestellt werden. In einer VPS Hosting-Umgebung bedeutet dies in der Regel das Ausführen eines Cache-Flush-Befehls für Ihr Caching-Plugin oder Ihren Reverse-Proxy (Nginx, Varnish usw.).

Zu vermeidende Spezifitätsfallen

• Vermeiden Sie !important als Standardlösung. Es erzeugt einen Spezifitätswettlauf, der die zukünftige Wartung extrem schwierig macht.
• Setzen Sie keine Schriftgrößen in Pixeln auf dem html-Element, wenn Ihr Theme em-basierte Größen verwendet. Das Ändern von html { font-size: 20px; } skaliert jeden em-basierten Wert auf der gesamten Website und bricht häufig Abstände und Layouts.
• Verwenden Sie rem-Einheiten für Skalierbarkeit. rem-Werte sind relativ zum Root-html-Element, was sie vorhersehbar und zugänglich macht. Benutzer, die die Standard-Schriftgröße ihres Browsers erhöhen, profitieren von rem-basierten Layouts, was eine WCAG-Barrierefreiheitsanforderung ist.

Barrierefreiheit und Schriftgröße: Was Google bewertet

Googles Lighthouse-Audit kennzeichnet Text, der zu klein zum Lesen ist, als Usability-Problem. Die empfohlene Mindest-Schriftgröße für Fließtext beträgt 16px für Desktop und 14px für Mobilgeräte, obwohl 16px auf allen Viewports die sicherere Ausgangsbasis ist. Das WCAG 2.1 Erfolgskriterium 1.4.4 erfordert, dass Text ohne Verlust von Inhalt oder Funktionalität auf bis zu 200 % vergrößert werden kann — eine Anforderung, die rem– und em-Einheiten standardmäßig erfüllen, während px-only-Layouts häufig scheitern.

Wenn Sie eine Website hosten, die ein globales Publikum bedient oder Barrierefreiheits-Compliance erfordert, sollten diese Überlegungen Ihre Entscheidungen zur Schriftgrößen-Implementierung leiten, nicht nur visuelle Präferenzen.

Caching- und Deployment-Überlegungen auf VPS

Wenn Sie CSS auf einer WordPress-Website ändern, die auf einem VPS Hosting– oder Dedicated Servers-Umgebung gehostet wird, sind die Änderungen aufgrund mehrerer Caching-Ebenen möglicherweise nicht sofort sichtbar:

• WordPress Object Cache (Redis, Memcached)
• Seiten-Caching-Plugins (WP Rocket, W3 Total Cache, LiteSpeed Cache)
• Nginx FastCGI Cache
• CDN Edge Cache (Cloudflare, BunnyCDN)

Leeren Sie nach jeder Schriftgrößenänderung alle aktiven Caches der Reihe nach — zuerst den Plugin-Cache, dann den serverseitigen Cache, dann den CDN. Dies zu versäumen ist der häufigste Grund, warum Entwickler berichten, dass CSS-Änderungen „nicht funktionieren”.

So leeren Sie den Nginx FastCGI Cache manuell auf einem Linux VPS:

sudo rm -rf /var/cache/nginx/*
sudo systemctl reload nginx

Für LiteSpeed Cache über WP-CLI:

wp litespeed-purge all

Praktische Entscheidungs-Checkliste

Verwenden Sie diese Checkliste, um die richtige Methode für Ihre Situation auszuwählen:

• Einen Absatz oder eine Überschrift auf einer einzelnen Seite ändern — Verwenden Sie das Typografie-Panel des Gutenberg Block Editors.
• Schriftgröße für den gesamten Fließtext oder alle Überschriften seitenübergreifend ändern — Verwenden Sie ein Typography-Plugin oder den Theme Customizer, wenn Ihr Theme dies unterstützt.
• Ein Full Site Editing Block-Theme verwenden — Verwenden Sie den Website-Editor (Design > Editor > Stile) und theme.json-Voreinstellungen.
• Responsive, flüssige Typografie benötigen — Schreiben Sie benutzerdefiniertes CSS mit clamp() in einem Child-Theme-Stylesheet oder Additional CSS.
• Änderungen müssen Theme-Updates überstehen — Verwenden Sie ein Child-Theme, ein Plugin oder theme.json in einem benutzerdefinierten Block-Theme.
• Barrierefreiheits-Compliance ist erforderlich — Verwenden Sie rem– oder em-Einheiten; vermeiden Sie px-only-Deklarationen für Fließtext.
• Änderungen erscheinen nach der Bearbeitung nicht — Leeren Sie alle Caching-Ebenen: Plugin, Server und CDN.
• Konflikt zwischen Block-Editor und Theme-Stilen — Untersuchen Sie das Element in den Browser-DevTools, identifizieren Sie die geltende CSS-Regel und passen Sie die Spezifität entsprechend an.

FAQ

Was ist die beste Einheit für WordPress-Schriftgrößen: px, em oder rem?

rem ist die empfohlene Einheit für Schriftgrößen in WordPress. Sie ist relativ zum Root-html-Element, was sie über verschachtelte Komponenten hinweg vorhersehbar und von Natur aus zugänglich macht — vom Benutzer festgelegte Schriftgrößenpräferenzen auf Browser-Ebene werden automatisch berücksichtigt. Verwenden Sie px nur für feste dekorative Elemente, bei denen eine Skalierung unerwünscht ist.

Warum wird meine Schriftgrößenänderung im Gutenberg-Editor nicht im Frontend angezeigt?

Die häufigsten Ursachen sind eine Caching-Ebene, die eine veraltete Version der Seite bereitstellt, eine Theme-Stylesheet-Regel mit höherer CSS-Spezifität, die den Inline-Stil des Blocks überschreibt, oder ein Typography-Plugin, das Schriftgrößen global zurücksetzt. Öffnen Sie die Seite in einem Inkognito-Fenster und untersuchen Sie das Element in DevTools, um die Ursache zu isolieren.

Kann ich Schriftgrößen in WordPress ohne Plugin oder Programmierung ändern?

Ja. Das Typografie-Panel des Gutenberg Block Editors ermöglicht Schriftgrößenänderungen pro Block ohne Programmierkenntnisse. Der Theme Customizer bietet ebenfalls Schriftgrößensteuerelemente, wenn Ihr aktives Theme diese registriert. Keiner der Ansätze erfordert Plugin-Installation oder CSS-Kenntnisse.

Werden Schriftgrößenänderungen im Theme Customizer nach einem Theme-Update meine Website beeinflussen?

Die Einstellungen selbst werden in der WordPress-Datenbank gespeichert und werden durch ein Theme-Update nicht gelöscht. Wenn das Theme-Update jedoch die zugrunde liegende CSS-Struktur ändert oder die Customizer-Option entfernt, die die Schriftgröße gesteuert hat, kann sich die visuelle Ausgabe ändern. Die Verwendung eines Child-Themes und benutzerdefiniertem CSS ist widerstandsfähiger gegenüber Upstream-Theme-Änderungen.

Wie lege ich in WordPress unterschiedliche Schriftgrößen für Mobilgeräte und Desktop fest?

Verwenden Sie CSS-Media-Queries im Additional CSS-Panel oder einem Child-Theme-Stylesheet, oder verwenden Sie die clamp()-Funktion für flüssige Skalierung. Der Gutenberg Block Editor unterstützt in einigen Themes auch Typografie-Einstellungen pro Breakpoint über die theme.json layout-Konfiguration, obwohl diese Funktion vom Implementierungsgrad des Themes abhängt.