WordPress: Schrift im HTML-Editor ändern

In WordPress 3.2 wurde die Schrift geändert: Arial/Helvetica waren ab da Standardschrift im Backend. Dies ist nicht bei allen Nutzern auf Sympathien gestoßen und so wurde mit dem Update auf 3.2.1 in dem Admin-CSS lediglich die generische Schriftfamilie sans-serif angegeben.

Trotz des Updates auf die neue WordPress-Version sind aber die Schriften Consolas (Windows) bzw. Monaco (Mac) in der HTML-Ansicht bzw. dem HTML-Editor geblieben. Bei den beiden Schriften handelt es sich um nichtproportionale (monospace) Schriften.

Solche Schriften – ich persönlich bevorzuge Courier New – eignen sich hervorragend in einem richtigen Code-Editor. Aber die HTML-Ansicht in WordPress nutze ich auch um “normalen” Text einzufügen und dafür sind meiner Meinung nach die nichtproportionalen Schriften nicht wirklich geeignet.

Die functions.php

Wer dies ändern möchte, dem stehen zwei Lösungswege zur Verfügung. Zum einen kann man folgendes in die functions.php seines WordPress-Themes einfügen:

<?php
// Vorherige Anweisungen
// Ändert die Schrift im HTML-Editor
add_action( 'admin_head-post.php', 'devpress_fix_html_editor_font' );
add_action( 'admin_head-post-new.php', 'devpress_fix_html_editor_font' );
function devpress_fix_html_editor_font() { ?>
<style type="text/css">#editorcontainer #content, #wp_mce_fullscreen {font: 13px/1.45 verdana, sans-serif;}</style>
<?php }
// Anweisungen die später hinzugefügt werden
?>

Ich habe extra für weniger erfahrene Nutzer durch die Beiden PHP-Kommentare gekennzeichnet, wie man das Code-Fragment in die schon bestehende functions.php einfügt. Die CSS-Regel deckt sowohl die HTML-Ansicht im “normalen” Modus (#editorcontainer #content) wie auch im Vollbildmodus (#wp_mce_fullscreen). Ob jetzt unbedingt Verdana und auch noch mit 13 Pixel zum Einsatz kommen sollte, soll jeder für sich selbst entscheiden. Nach dem Schrägstrich ist der Wert für die Zeilenhöhe (line-height).

Den Code habe ich auf devpress.com gefunden.

[adrotate group=”6″]

Lösung im Browser: Stylish für Firefox

Wer aber seine WordPress-Installation möglich schlank halten möchte und/oder mehrere Projekte auf Basis von WordPress hat, für den könnte es interessanter sein eine browserbasierte Lösung in Betracht zu ziehen, da man diese nur einmal vornehmen muss. Eine solche Lösung bietet das Firefox-Addon Stylish welches ich bereits im Artikel WordPress 3.2: Arial im Backend ersetzen vorgestellt habe.

Firefox: mit Stylish neue Schrift für HTML-Editor im WordPress fetslegen

Einfach in Stylish eine neuen Stil erstellen und zum Beispiel folgende CSS-Regel eingeben:

#editorcontainer #content, #wp_mce_fullscreen {font: 13px/1.45 verdana, sans-serif !important;}

Wichtig ist das man hier !important hinzufügt, da du nicht eine Regel ersetzt, wie im ersten Beispiel, sondern eine aktive CSS-Regel überschreibst.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.