WordPress-Schriftart ändern

Um in WordPress die Schriftart zu ändern, bieten sich mehrere Wege an. Zum einen ist es möglich, Textblöcke oder einzelne Abschnitte im Editor zu formatieren. Das geht einfach, führt auf Dauer jedoch bald zu einem inkonsistenten Erscheinungsbild.

Besser ist es, Schriftarten für die gesamte Site im Theme zu definieren. So wird ein einheitliches und ansprechendes Design gewahrt. Allerdings benötigt man zum Vornehmen der Änderungen Adminrechte und Fachwissen. Wir zeigen, wie man am besten vorgeht, um in WordPress die Schriftart zu ändern.

Betrachten wir den einfachsten Fall, für eine bestehende WordPress-Website die Schriftart zu ändern. Normalerweise legt das Theme eine Schriftart für den gesamten Text fest. Nehmen wir an, es handelt sich um eine generische Sans-Serif-Angabe. Nun möchten wir die Überschriften auf eine Serif-Schriftart ändern. In WordPress bedingt das zwei Schritte:

1. Schriftart für HTML-Elemente in CSS definieren
2. CSS-Code in WordPress einbinden

Um die Schriftart für ein HTML-Element festzulegen, nutzen wir die CSS-Eigenschaft ‚font-family‘. Die verwandte ‚@font-face‘ dient zum Definieren eigener Schriftarten.

Schauen wir uns zunächst an, wie sich die Schriftart für ein HTML-Element in CSS festlegen lässt. Für unser Beispiel möchten wir für die Überschriften H1 bis H6 eine Serif-Schriftart verwenden. Wir nutzen den folgenden Code:

Zum Hinzufügen einer Schriftart auf einer Website ein Webfont benötigt. Dieser lässt sich direkt von Google Fonts oder einer ähnlichen Plattform beziehen. Dazu genügt es, einen zusätzlichen, von Google gehosteten Stylesheet in WordPress einzubinden. Jedoch gibt es dabei u. U. Datenschutzbedenken. Je nachdem, mit welcher Methode der Webfont eingebunden wird, kann die Performance der Site beeinträchtigt werden. Es ist daher meist vorzuziehen, Webfonts als Teil des Theme-Ordners auf dem WordPress-Server zu hosten.

Webfonts selbst zu hosten ist leichter gesagt als getan. Am besten bedient man sich eines spezialisierten Tools, das aus hochgeladenen Font-Dateien alle gebräuchlichen Webfont-Formate samt dem benötigten CSS-Code erzeugt. Über die Jahre hat sich Font Squirrel als Standard etabliert. Alternativ setzt man ein Plugin wie Use Any Font ein, um in WordPress eine weitere Schriftart hinzuzufügen.

Zusammenfassend zeigen wir gängige Methoden, mit deren Hilfe sich in WordPress eine Schriftart hinzufügen lässt. Diese haben allesamt eigene Vor- und Nachteile:

Bisher haben wir besprochen, wie sich in WordPress die Schriftart ändern lässt. Schauen wir uns nun an, mit welchen Methoden wir in WordPress Schriftgröße und Schriftfarbe ändern können. Wir nutzen im Grunde dasselbe Vorgehen, mit dem wir in WordPress das Font ändern:

1. Ziel-Element lokalisieren und Selektor identifizieren
2. CSS-Regeln im Web-Inspektor prototypisieren
3. CSS-Angaben in WordPress einbinden

Zum Überblick die wichtigsten CSS-Angaben, um in WordPress Schriftgröße und Schriftfarbe zu ändern:

Betrachten wir wiederum den einfachsten Fall: Wir möchten in WordPress die Schriftgröße der gesamten Site ändern. Dazu nutzen wir das HTML-Root-Element als Selektor mit einer Prozentangabe für die Schriftgröße. So lässt sich die Veränderung der Größe intuitiv verstehen:

• „Schrift 10% größer darstellen“: html { font-size: 110%; }
• „Schrift 10% kleiner darstellen“: html { font-size: 90%; }

Wie gehen wir nun vor, um die Schriftgröße bestimmter Elemente anzupassen? Ziehen wir als Beispiel wiederum die Überschriften H1 bis H6 hinzu. Wir zeigen zunächst, wie man es nicht macht:

Hier laufen zwei Dinge schief: Zum einen werden Pixel („px“) als absolute Einheit verwendet. Zum anderen sind die einzelnen Schriftgrößen beliebig gewählt. Letzteres führt zu einem inkonsistenten und unruhig wirkenden Design. Leider finden sich beide „Anti-Patterns“ in vielen – auch kommerziellen – WordPress-Themes wieder. Besser ist es, für die Angabe von Schriftgrößen relative Einheiten zu verwenden. Mit der Einheit „rem“ beziehen sich die Größenangaben auf das HTML-Root-Element. Eine Angabe von „2rem“ bedeutet dementsprechend: „doppelt so groß wie die normale Schriftgröße“.

Die Kombination aus Prozentangabe für das HTML-Root-Element und Rem-Angaben für alle anderen Text-Elemente eignet sich perfekt fürs responsive Design. Man benötigt lediglich eine Handvoll CSS Media-Queries für verschiedene Bildschirmbreiten, die die Schriftgröße des HTML-Root-Elements anpassen. Alle anderen Text-Elemente skalieren automatisch mit, wobei deren Proportionen untereinander erhalten bleiben:

Bleibt die Frage, nach welchem Ermessen man die Größenangaben der einzelnen Text-Elemente wählt. Wie bereits erwähnt, ist es keine gute Idee, beliebige Werte zu wählen. Ein guter Ansatz besteht darin, eine „typografische Skala“ zu nutzen. Typografische Skalen sind inspiriert von musikalischen Harmonien und beruhen auf mathematischen Formeln wie dem Goldenen Schnitt. Nach einer typografischen Skala gestaffelte Schriftgrößen weisen ein harmonisches Erscheinungsbild auf. Praktischerweise gibt es im Web Generatoren, die den benötigten CSS-Code automatisch erzeugen. Wir zeigen hier exemplarisch die typografische Skala des „Tachyons“-Frameworks:

Vielleicht ahnen Sie es schon: Um in WordPress die Schriftfarbe zu ändern, wählen wir nicht etwa den gesamten Text einer Seite aus und suchen uns dann eine neue Farbe aus einem Menü aus. Stattdessen gehen wir analog zur Schriftart vor und legen die Farbe per CSS-Code fest. Typisch für CSS ist, dass es mehrere Methoden gibt, ein gewünschtes Ergebnis zu erzielen. Wir können hier nicht im Detail auf alle Wege eingehen, Farbangaben in CSS zu definieren. Die nachfolgenden CSS-Regeln sind äquivalent:

Wie Sie sehen, nutzen wir zum Festlegen der Schriftfarbe für die gesamte Site das HTML-Body-Element mit der CSS-Eigenschaft „color“. Alle anderen Text-Elemente erben davon. Bei Bedarf überschreiben wir den geerbten Farbwert für spezifische Klassen von Elementen. Um beispielsweise Überschriften in einem dunklen Grau darzustellen, bedienen wir uns des folgenden Codes:

Die Schriftfarbe ist wie die Schriftart ein essenzielles Design-Element. Farben transportieren im besonderen Maße Emotionen. Daher ist es wichtig, konsistent zu bleiben und nicht zu viele Farben auf einer Seite zu verwenden. Eine inkonsistente oder schlecht abgestimmte Farbgestaltung wirkt unruhig und kann Seitenbesucher geradezu vergraulen. Im Zweifel gilt: Weniger ist mehr.

Für eine gute Nutzbarkeit ist es unabdingbar, ein ausreichend hohes Kontrastverhältnis zu gewährleisten. Nur sind die Texte mühelos lesbar. Glücklicherweise lassen sich Kontrastwerte für Kombinationen von Text- und Hintergrundfarbe errechnen. Das bereits erwähnte Tachyons-Framework bringt eine ausgereifte Farbtabelle samt kontrastreicher Kombinationen mit. Kopiert man von dort geeignete Farbwerte für die eigene WordPress-Site, macht man nichts falsch.

Je nach eingesetztem Editor ist es möglich, in WordPress die Schriftfarbe ohne CSS zu ändern. Normalerweise führt dies schnell zu einem inkonsistenten Erscheinungsbild und ist daher keine gute Idee. Der moderne Gutenberg-Editor bietet einen gangbaren Mittelweg. So ist in Gutenberg eine vordefinierte Farbpalette hinterlegt, die sich an die Farbgebung des Themes anpassen lässt. Weist man einem Block eine der vordefinierten Textfarben zu, fügt der Editor lediglich ein paar CSS-Klassen ein. So bleibt die Trennung der Belange erhalten; bei Bedarf lassen sich die Klassen im Nachhinein überschreiben bzw. stummschalten.

Ab Werk erlaubt Gutenberg jedoch auch das Zuweisen einer „individuellen Farbe“ für einzelne Textabschnitte. Dies sollte tunlichst vermieden werden. Denn anstelle eines vordefinierten Klassen-Namens fügt Gutenberg die individuelle Farbe als hardkodierten Farbwert per Inline-Style in den HTML-Code ein. Hier beispielshalber dargestellt:

Inline-Styles haben die höchste CSS-Spezifität und überleben damit hartnäckig ein späteres Redesign. Es ist daher ratsam, die individuellen Farben im Editor zu deaktivieren. Wir tragen dazu den folgenden Code in die functions.php-Datei unseres Child-Themes ein:

Alternativ lässt sich die Gutenberg-Farbpalette auch komplett deaktivieren. Wir nutzen wiederum die functions.php-Datei: