perun.net – WordPress & Webwork



WordPress 3.2: Arial im Backend ersetzen

Von am 06. 07. 2011 um 09:30 – Aktualisiert am 11. 08. 2012 um 20:55

Warum wurde Arial als Standardschrift im Backend gewählt und wie kann man die Schrift 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.

Diesen Artikel weiterempfehlen:

Hinweis:
Schulungsunterlagen für WordPress
Aktuell und praxiserprobt. Als E-Book für den Privatgebrauch oder als PDF-Volumenlizenz für den geschäftlichen Einsatz.

Verwandte Artikel:

 — 


21 Kommentare

  1. 1. – f_ranft

    Kommentar vom 06.07.2011 um 09:54

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

  2. 2. – Tipo

    Kommentar vom 06.07.2011 um 09:57

    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. 3. – Ralf

    Kommentar vom 06.07.2011 um 10:47

    "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. 4. – Daniel

    Kommentar vom 06.07.2011 um 11:50

    Danke für den Tipp.
    Ich habe mir die Arial mit der Georgia eingesetzt.
    Finde diese viel angenehmer im Schriftbild.

  5. 5.WordPress 3.2 online - Updates, Version, WordPress, Server, Backend, Schriftart - Adamantos Webworker Blog

    Pingback vom 06.07.2011 um 13:06

    [...] Im Backend gibt es jetzt eine andere Schriftart, die manchen nicht gefällt. Mit dieser Anleitung kann man die Schriftart überschreiben. [...]

  6. 6.soulsilence

    Kommentar vom 06.07.2011 um 14:46

    Danke für den Tipp, das sieht doch gleich viel besser aus. :)

  7. 7.Stefan

    Kommentar vom 06.07.2011 um 15:30

    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:

  8. 8.WordPress 3.2 - Arial im Backend durch andere Schriftart ersetzen! » Beitrag » YATTER

    Pingback vom 06.07.2011 um 16:37

    [...] WordPress 3.2 – Arial im Backend durch andere Schriftart ersetzen! [...]

  9. 9.Milan

    Kommentar vom 06.07.2011 um 18:23

    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.

  10. 10.Benutzerdefiniertes CSS für Webseiten in Safari - Wellenspeicher

    Pingback vom 06.07.2011 um 21:30

    [...] perun.net wurde heute ein Tip veröffentlicht, wie man in der neuen WordPress Version 3.2 im Backend die [...]

  11. 11.Sebastian Pertsch

    Kommentar vom 07.07.2011 um 11:07

    Danke, das hat geholfen!

  12. 12.Steph

    Kommentar vom 07.07.2011 um 11:46

    Für Chrome habe ich folgendes Plugin gefunden:
    https://chrome.google.com/webstore/detail/acgbckcjlpneapibaifnhpjnnakijihm?hl=en#
    Netterweise befreit es auch gleich von Comic Sans

  13. 13.Kai

    Kommentar vom 07.07.2011 um 17:07

    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! ;)

  14. 14.badshah

    Kommentar vom 08.07.2011 um 07:20

    Danke, das hat geholfen!

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

    Pingback vom 08.07.2011 um 08:56

    [...] Safari-Plugin, welches man auch als Chrome-Extension runterladen kann. Firefox-User greifen auf das Plugin Stylish [...]

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

    Pingback vom 08.07.2011 um 14:03

    [...] Für Firefox geht das mit der Erweiterung "Stylish". Vladimir Simovic erklärt unter Perun.net wie es im Detail funktioniert.Die Adminbar wurde deutlich überarbeitet, dafür entfällt das [...]

  17. 17.WordPress 3.2.1 ist da | WordPress & Webwork

    Pingback vom 12.07.2011 um 22:12

    [...] ist die Vorgehensweise, die ich im Artikel WordPress 3.2: Arial im Backend ersetzen beschrieben habe nicht mehr notwendig … müsste ich noch testen um dies auch zu [...]

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

    Pingback vom 14.07.2011 um 14:40

    [...] Safari-Plugin, welches man auch als Chrome-Extension runterladen kann. Firefox-User greifen auf das Plugin Stylish [...]

  19. 19.Font im Backend von Wordpress 3.2 ändern | Linux und Ich

    Pingback vom 18.12.2011 um 16:45

    [...] (Via perun.net) [...]

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

    Pingback vom 11.05.2012 um 19:29

    [...] WordPress 3.2: Arial im Backend ersetzen [...]

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

    Pingback vom 15.08.2012 um 17:58

    [...] vornehmen muss. Eine solche Lösung bietet das Firefox-Addon Stylish welches ich bereits im Artikel WordPress 3.2: Arial im Backend ersetzen vorgestellt [...]

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.



Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.