WordPress-Schrift­art ändern

Um in WordPress die Schrift­art zu ändern, bieten sich mehrere Wege an. Zum einen ist es möglich, Text­blö­cke oder einzelne Ab­schnit­te im Editor zu for­ma­tie­ren. Das geht einfach, führt auf Dauer jedoch bald zu einem in­kon­sis­ten­ten Er­schei­nungs­bild.

Besser ist es, Schrift­ar­ten für die gesamte Site im Theme zu de­fi­nie­ren. So wird ein ein­heit­li­ches und an­spre­chen­des Design gewahrt. Al­ler­dings benötigt man zum Vornehmen der Än­de­run­gen Ad­min­rech­te und Fach­wis­sen. Wir zeigen, wie man am besten vorgeht, um in WordPress die Schrift­art zu ändern.

Be­trach­ten wir den ein­fachs­ten Fall, für eine be­stehen­de WordPress-Website die Schrift­art zu ändern. Nor­ma­ler­wei­se legt das Theme eine Schrift­art für den gesamten Text fest. Nehmen wir an, es handelt sich um eine ge­ne­ri­sche Sans-Serif-Angabe. Nun möchten wir die Über­schrif­ten auf eine Serif-Schrift­art ändern. In WordPress bedingt das zwei Schritte:

1. Schrift­art für HTML-Elemente in CSS de­fi­nie­ren
2. CSS-Code in WordPress einbinden

Um die Schrift­art für ein HTML-Element fest­zu­le­gen, nutzen wir die CSS-Ei­gen­schaft ‚font-family‘. Die verwandte ‚@font-face‘ dient zum De­fi­nie­ren eigener Schrift­ar­ten.

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

Zum Hin­zu­fü­gen einer Schrift­art 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 zu­sätz­li­chen, von Google ge­hos­te­ten Style­sheet in WordPress ein­zu­bin­den. Jedoch gibt es dabei u. U. Da­ten­schutz­be­den­ken. Je nachdem, mit welcher Methode der Webfont ein­ge­bun­den wird, kann die Per­for­mance der Site be­ein­träch­tigt werden. Es ist daher meist vor­zu­zie­hen, 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 spe­zia­li­sier­ten Tools, das aus hoch­ge­la­de­nen Font-Dateien alle ge­bräuch­li­chen Webfont-Formate samt dem be­nö­tig­ten CSS-Code erzeugt. Über die Jahre hat sich Font Squirrel als Standard etabliert. Al­ter­na­tiv setzt man ein Plugin wie Use Any Font ein, um in WordPress eine weitere Schrift­art hin­zu­zu­fü­gen.

Zu­sam­men­fas­send zeigen wir gängige Methoden, mit deren Hilfe sich in WordPress eine Schrift­art hin­zu­fü­gen lässt. Diese haben allesamt eigene Vor- und Nachteile:

Bisher haben wir be­spro­chen, wie sich in WordPress die Schrift­art ändern lässt. Schauen wir uns nun an, mit welchen Methoden wir in WordPress Schrift­grö­ße und Schrift­far­be ändern können. Wir nutzen im Grunde dasselbe Vorgehen, mit dem wir in WordPress das Font ändern:

1. Ziel-Element lo­ka­li­sie­ren und Selektor iden­ti­fi­zie­ren
2. CSS-Regeln im Web-Inspektor pro­to­ty­pi­sie­ren
3. CSS-Angaben in WordPress einbinden

Zum Überblick die wich­tigs­ten CSS-Angaben, um in WordPress Schrift­grö­ße und Schrift­far­be zu ändern:

Be­trach­ten wir wiederum den ein­fachs­ten Fall: Wir möchten in WordPress die Schrift­grö­ße der gesamten Site ändern. Dazu nutzen wir das HTML-Root-Element als Selektor mit einer Pro­zent­an­ga­be für die Schrift­grö­ße. So lässt sich die Ver­än­de­rung der Größe intuitiv verstehen:

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

Wie gehen wir nun vor, um die Schrift­grö­ße be­stimm­ter Elemente an­zu­pas­sen? Ziehen wir als Beispiel wiederum die Über­schrif­ten 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 Schrift­grö­ßen beliebig gewählt. Letzteres führt zu einem in­kon­sis­ten­ten und unruhig wirkenden Design. Leider finden sich beide „Anti-Patterns“ in vielen – auch kom­mer­zi­el­len – WordPress-Themes wieder. Besser ist es, für die Angabe von Schrift­grö­ßen relative Einheiten zu verwenden. Mit der Einheit „rem“ beziehen sich die Grö­ßen­an­ga­ben auf das HTML-Root-Element. Eine Angabe von „2rem“ bedeutet dem­entspre­chend: „doppelt so groß wie die normale Schrift­grö­ße“.

Die Kom­bi­na­ti­on aus Pro­zent­an­ga­be für das HTML-Root-Element und Rem-Angaben für alle anderen Text-Elemente eignet sich perfekt fürs re­spon­si­ve Design. Man benötigt lediglich eine Handvoll CSS Media-Queries für ver­schie­de­ne Bild­schirm­brei­ten, die die Schrift­grö­ße des HTML-Root-Elements anpassen. Alle anderen Text-Elemente skalieren au­to­ma­tisch mit, wobei deren Pro­por­tio­nen un­ter­ein­an­der erhalten bleiben:

Bleibt die Frage, nach welchem Ermessen man die Grö­ßen­an­ga­ben 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 „ty­po­gra­fi­sche Skala“ zu nutzen. Ty­po­gra­fi­sche Skalen sind in­spi­riert von mu­si­ka­li­schen Harmonien und beruhen auf ma­the­ma­ti­schen Formeln wie dem Goldenen Schnitt. Nach einer ty­po­gra­fi­schen Skala ge­staf­fel­te Schrift­grö­ßen weisen ein har­mo­ni­sches Er­schei­nungs­bild auf. Prak­ti­scher­wei­se gibt es im Web Ge­ne­ra­to­ren, die den be­nö­tig­ten CSS-Code au­to­ma­tisch erzeugen. Wir zeigen hier ex­em­pla­risch die ty­po­gra­fi­sche Skala des „Tachyons“-Frame­works:

Viel­leicht ahnen Sie es schon: Um in WordPress die Schrift­far­be zu ändern, wählen wir nicht etwa den gesamten Text einer Seite aus und suchen uns dann eine neue Farbe aus einem Menü aus. Statt­des­sen gehen wir analog zur Schrift­art vor und legen die Farbe per CSS-Code fest. Typisch für CSS ist, dass es mehrere Methoden gibt, ein ge­wünsch­tes Ergebnis zu erzielen. Wir können hier nicht im Detail auf alle Wege eingehen, Farb­an­ga­ben in CSS zu de­fi­nie­ren. Die nach­fol­gen­den CSS-Regeln sind äqui­va­lent:

Wie Sie sehen, nutzen wir zum Festlegen der Schrift­far­be für die gesamte Site das HTML-Body-Element mit der CSS-Ei­gen­schaft „color“. Alle anderen Text-Elemente erben davon. Bei Bedarf über­schrei­ben wir den geerbten Farbwert für spe­zi­fi­sche Klassen von Elementen. Um bei­spiels­wei­se Über­schrif­ten in einem dunklen Grau dar­zu­stel­len, bedienen wir uns des folgenden Codes:

Die Schrift­far­be ist wie die Schrift­art ein es­sen­zi­el­les Design-Element. Farben trans­por­tie­ren im be­son­de­ren Maße Emotionen. Daher ist es wichtig, kon­sis­tent zu bleiben und nicht zu viele Farben auf einer Seite zu verwenden. Eine in­kon­sis­ten­te oder schlecht ab­ge­stimm­te Farb­ge­stal­tung wirkt unruhig und kann Sei­ten­be­su­cher geradezu ver­grau­len. Im Zweifel gilt: Weniger ist mehr.

Für eine gute Nutz­bar­keit ist es un­ab­ding­bar, ein aus­rei­chend hohes Kon­trast­ver­hält­nis zu ge­währ­leis­ten. Nur sind die Texte mühelos lesbar. Glück­li­cher­wei­se lassen sich Kon­trast­wer­te für Kom­bi­na­tio­nen von Text- und Hin­ter­grund­far­be errechnen. Das bereits erwähnte Tachyons-Framework bringt eine aus­ge­reif­te Farb­ta­bel­le samt kon­trast­rei­cher Kom­bi­na­tio­nen mit. Kopiert man von dort geeignete Farbwerte für die eigene WordPress-Site, macht man nichts falsch.

Je nach ein­ge­setz­tem Editor ist es möglich, in WordPress die Schrift­far­be ohne CSS zu ändern. Nor­ma­ler­wei­se führt dies schnell zu einem in­kon­sis­ten­ten Er­schei­nungs­bild und ist daher keine gute Idee. Der moderne Gutenberg-Editor bietet einen gangbaren Mittelweg. So ist in Gutenberg eine vor­de­fi­nier­te Farb­pa­let­te hin­ter­legt, die sich an die Farb­ge­bung des Themes anpassen lässt. Weist man einem Block eine der vor­de­fi­nier­ten Text­far­ben 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 Nach­hin­ein über­schrei­ben bzw. stumm­schal­ten.

Ab Werk erlaubt Gutenberg jedoch auch das Zuweisen einer „in­di­vi­du­el­len Farbe“ für einzelne Text­ab­schnit­te. Dies sollte tunlichst vermieden werden. Denn anstelle eines vor­de­fi­nier­ten Klassen-Namens fügt Gutenberg die in­di­vi­du­el­le Farbe als hard­ko­dier­ten Farbwert per Inline-Style in den HTML-Code ein. Hier bei­spiels­hal­ber dar­ge­stellt:

Inline-Styles haben die höchste CSS-Spe­zi­fi­tät und überleben damit hart­nä­ckig ein späteres Redesign. Es ist daher ratsam, die in­di­vi­du­el­len Farben im Editor zu de­ak­ti­vie­ren. Wir tragen dazu den folgenden Code in die functions.php-Datei unseres Child-Themes ein:

Al­ter­na­tiv lässt sich die Gutenberg-Farb­pa­let­te auch komplett de­ak­ti­vie­ren. Wir nutzen wiederum die functions.php-Datei: