WordPress & Webwork

WordPress 3.2: Arial im Backend ersetzen

Firefox Stylish Für viele WordPress-Nutzer ist es unverständlich und einige ärgern sich sogar sehr, dass die Entwickler sich dazu entschieden haben Arial als "Standardschrift" für den Admin-Bereich zu wählen.

Im Grunde genommen geht es um die folgende Deklaration in der global.css im Ordner /wp-admin/css/:

body, td, textarea, input, select {
	font-family: Arial, "Bitstream Vera Sans", Helvetica, Verdana, sans-serif;
	font-size: 13px;}

Wer sich ein bisschen mit CSS auskennt, der weiß was hier passiert. Ist auf dem System des Benutzers Arial vorhanden, dann wird Arial verwendet. Wenn nicht, dann schaut der Browser ob Bitstream Vera Sans vorhanden ist, wenn nicht, dann sucht er nach Helvetica usw. Und da Arial auf den allermeisten Systemen vorhanden ist – zumindest in der Windows-Welt – kommt natürlich in den meisten Fällen auch Arial zum Einsatz.

Im Artikel Design in WordPress 3.2 erklärt der Autor warum sich die Entwickler für Arial entschieden haben. Es geht darum, dass Helvetica auf dem PC keine gute Figur macht. OK, aber warum setzt man nicht Verdana oder Tahoma an der ersten Stelle. Beide Schriften machen in meinen Augen eine bessere Figur als Arial.

Arial aus WordPress-Backend entfernen

Wie auch immer gibt es bei der Lösung des Problems mehrere Lösungen. Als erstes könntest in der global.css die Anpassungen vornehmen, was aber nicht wirklich praktikabel ist, weil deine Änderungen beim nächsten Update futsch wären. Auf WordPress-Buch.de hat mich ein Kommentator auf zwei Lösungen aufmerksam gemacht: einem Plugin und einem Browserscript.

Da ich kein Plugin wollte, weil mich Arial in allen meinen Weblogs stört, musste eine Lösung her die global wirkt. Deswegen habe ich mich für eine Firefox-Erweiterung mit dem Namen Stylish entschieden.

WordPress-Backend ohne Arial

Nach der Installation dieses Addons kann man spezielle CSS-Regeln erstellen und diese auch nur an eine bestimmte URL koppeln, aber dadurch dass ich, wie schon oben erwähnt, mehrere Weblogs zu betreuen habe, musste ich eine globale Regel erstellen. Dafür konnte ich aber nicht auf die allgemeinen Element-Selektoren zurückgreifen (z. B. body), da dies alle Seiten betreffen würde.

Daher mussten Selektoren her, die nur im WordPress-Backend vorkommen. Folgende Regel für Stylish funktioniert bei mir:

.wp-admin *, #media-upload * {
    font-family: verdana, sans-serif !important;}

Ich gehe davon aus, dass es für andere Browser auch ähnlich einfache Lösungen gibt. Aber da ich Google Chrome, Opera und den IE9 nur zum Testen von Websites nutze, kann ich hier keine qualifizierte Aussagen machen.

21 Reaktion(en)

  1. f_ranft

    Die Entwickler hätten "font-family: sans-serif;" setzen sollen, dann wären alle glücklich geworden (Mac => Helvetica, PC => Arial).

  2. Tipo

    Man wird wohl um die Anpassung der 'global.css' nicht herum kommen, wenn man auch anderen Nutzern von WordPress Arial ersparen möchte.
    Schade das man sich für diese Schrift entschieden hat.

  3. Ralf

    "OK, aber warum setzt man nicht Verdana oder Tahoma an der ersten Stelle."

    Tahoma ist nicht Teil des Core fonts for the web und somit nur mit geringer Wahrscheinlichkeit auch auf Mac/Linux-Systemen anzutreffen (Liste der Apfel-Schriften). Verdana hingegen hat eine mangelhafte Unicode-Unterstützung.

    Vor allem die große Unicode-Unterstützung von Arial dürfte diese Schriftart, neben ihrer weiten Verbreitung auf diversen OS, zur ersten Wahl gemacht haben.

  4. Pingback: WordPress 3.2 online - Updates, Version, WordPress, Server, Backend, Schriftart - Adamantos Webworker Blog

  5. Stefan

    Wusste bis grade eben gar nicht mal, das ich dass ändern kann mit der internen Schriftart bei WordPress. Danke für den Tipp und die Anleitung hier! :)

    Werde mir Arial dann auch mal durch Georgia ersetzen. :mrgreen:

  6. Pingback: WordPress 3.2 - Arial im Backend durch andere Schriftart ersetzen! » Beitrag » YATTER

  7. Milan

    Vielen Dank, die Anleitung ist kurz und kompakt und man hat das Plugin innerhalb von einer Minute entsprechend eingerichtet.

    Genau das habe ich gesucht. Schade, dass man nicht das ganze WordPress-Backend auf den alten Stand (also visuell) zurücksetzen kann.

  8. Pingback: Benutzerdefiniertes CSS für Webseiten in Safari - Wellenspeicher

  9. Kai

    Grundsätzlich existiert für Chrome ebenfalls Stylish als Plugin. Ich würde aber die von Steph vorgeschlagene Alternative vorziehen.

    MfG,
    Kai

    P.S.: Sehr guter Hinweis, danke sehr! ;)

  10. Pingback: TechnikLOAD 44 – WordPress 3.2, Facebook-Videochat, Crowdfunding, OS X Lion und das Gewinnspiel | TechnikLOAD

  11. Pingback: WordPress 3.2 Was ist Neu, Performance und Kompatibilität » 3D-Mediadesign • Webdesign und 3D Visualisierung

  12. Pingback: WordPress 3.2.1 ist da | WordPress & Webwork

  13. Pingback: TechnikLOAD 45 – Flaschenaufklärung, Passwortgau, Google+ vs. Facebook, NoisePNG, SOTA-Infografiken, The Wall | TechnikLOAD

  14. Pingback: Font im Backend von Wordpress 3.2 ändern | Linux und Ich

  15. Pingback: WordPress: Schrift im Backend und HTML-Editor anpassen (update) | WordPress & Webwork

  16. Pingback: WordPress: Schrift im HTML-Editor ändern | WordPress & Webwork

Die Kommentare in diesem Beitrag sind geschlossen.