WordPress Schriften ändern (Backend)

Mit WordPress 3.2 wurden die Standardschrift Arial bzw. Helvetica für das Backend (im Administrationsbereich) eingeführt. Diese Maßnahme hat nicht alle Nutzer sonderlich erfreut – und so konnte man das Update kaum erwarten.

Ab WordPress 3.2.1 wurde allgemein die generische Schriftfamilie sans-serif definiert. Okay! Das war schon einmal sehr schön. Doch noch immer schaut WordPress nicht so recht aus wie zuvor. Im HTML-Editor und in der HTML-Ansicht sind nämlich die Schriften Consolas bzw. Monaco erhalten geblieben.

Diese sehen vielleicht ganz nett aus, haben aber einen Nachteil: sie sind nichtproportional. Das mag bei der Eingabe eines Codes ja Sinn macht, beim normalen Verfassen von Artikeln nervt es aber doch ein wenig. Also was ist zu tun? Wer die Schriften ändern möchte, kann mit wenigen Zeilen Code seine eigene Lieblingsschrift für das WordPress-Backend festlegen. Das Ganze funktioniert im Prinzip ganz einfach. Zunächst sucht ihr euch die Datei functions.php und fügt hier Folgendes hinzu:

Möglichkeit 1: function.php bearbeiten

 

<!–?php 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() { ?–>

<!–?php } ?–>

 

Im Bereich der CSS-Regel (style) wird die normale HTML-Ansicht (#editorcontainer #content) und die neue Vollbildansicht (#wp_mce_fullscreen) angepasst. Als Schrift habe ich hier die Georgia gewählt, aber hier könnt ihr natürlich eure Lieblingsschrift einfügen. Die Schriftgröße ist bei mir auf 12px mit einer Zeilenhöhe von 1,5 festgelegt. Wie gesagt: hier könnt ihr einfach eure Lieblingswerte eintragen. Der Code-Schnipsel kommt im Original übrigens von devpress.com

Möglichkeit 2: Schriften über den Browser ändern (Firefox)

Alternative: Sofern ihr mit Firefox arbeitet, könnt ihr die Schriften auch sehr einfach über den Browser anpassen. Hier könnt ihr euch ja mal das Plugin Stylish anschauen (Download Firefox Plugin Stylish). Einmal installiert, könnt ihr hier Regeln für eure Ansichten definieren. Die Stylesheets sind dabei die gleichen wie im obigen Beispiel:


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

 

WordPress Schriften ändern (Frontend)

Eine andere Frage ist, wie sich die Schriften auf der Website, also im Frontend ändern lassen. Die Schriften werden grundsätzlich in der Datei style.css im jeweiligen Theme festgelegt. Grundsätzlich ist zu empfehlen, dass ihr vor der Arbeit an der style.css eine Kopie der Datei anlegt, damit ihr im Notfall den alten Stand des Designs wieder herstellen könnt. Tipp am Rande: Alle Designers Inn WordPress Themes haben eine Theme-Optionen-Seite auf der leicht die Schriften angepasst werden können.

Möglichkeit 1: Die style.css

Die Bearbeitung der style.css könnt ihr mit jedem Texteditor vornehmen. Ich selbst nutze außerhalb von WordPress ADOBE DREAMWEAVER. Wenn ich zu faul bin die style.css zu speichern – zu bearbeiten – wieder hochzuladen, nutze ich innerhalb der WordPress-Benutzeroberfläche das kostenlose Plugin ADVANCED CODE EDITOR. Einmal installiert, könnt ihr nun unter dem Menüpunkt Design > Editor euer Theme aufrufen und die Datei styl.css bearbeiten.

Soweit zur technischen Seite. Aber was ist nun genau zu bearbeiten? Ganz einfach: Ihr müsst nach den HTML-Formatierungen für Texte Ausschau halten. So wird der Fließtext mit „p“ ausgezeichnet, die Überschriften 1 bis 6 mit „h1, h2 bis h6“ und Links mit „a“. Solltet ihr die Codierungen nicht kennen, könnt ihr euch auch die HTML-Ansicht eines Artikels anschauen und prüfen, welche Codes wo verwendet werden.

Eine gute Anlaufstelle bei der Suche nach den richtigen Formatierungen ist übrigens die Seite SELFHTML (Direktlink zum Thema schrift: http://de.selfhtml.org/css/eigenschaften/schrift.htm)

Habt ihr einmal das Kürzel gefunden, dass es zu Bearbeiten gilt, sucht ihr dieses in der style.css. Für einfachen Text suche ich also das P und finde in meinem Blog beispielsweise:
p {
font-family: „Helvetica Neue“, Arial,sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.6;
margin-bottom: 25px;
}

Diese kryptischen Zeilen bedeuten, dass ich als Schriftfamilie die „Helvetica Neue“ (erste Position in der CSS) nutze. Ist diese Schrift beim besucher nicht installiert, soll die Arial genommen werden. Und ist auch diese nicht installiert, soll eben eine andere Serifenlose Schrift gewählt werden.

Darüber hinaus ist die Schriftgröße 14 (font-size), die Linienstärke „normal“ (font-weight), der Zeilenabstand 1.8% (line-height) und der Abstand unter dem Textblock mit 25 px (margin-bottom) definiert. Jede Definition endet mit einem Simikolon. Dies ist wichtig. All diese Definitionen werden von den geschwungenen Klammern umfasst. Auch dies darf nicht geändert werden.

Möglichkeit 2: Plugins

Natürlich geht es auch komfortabler. So gibt es eine Reihe kostenloser Plugins, mit denen ihr die Schriften in euren Blogs ganz ohne oder mit nur rudimentären Progammierkenntnissen anpassen könnt. Ein sehr schönes Plugin ist AnyFont (Direktlink: http://wordpress.org/extend/plugins/anyfont/).

WordPress Schriften ändern - AnyFont

Das schöne an diesem Plugin ist, dass ihr nicht nur auf bestehende Standardschriften zurückgreifen müsst, sondern aus einer Vielzahl von Webfonts wählen könnt. Aber es gibt auch noch eine ganze Reihe weiterer Plugins mit ganz ähnlichen Funktionen. Googlet , wie beispielsweise WP-CUFON oder WP-FONT-FACE.

Okay. Ich hoffe, ich konnte ein wenig weiterhelfen! Sollteet ihr noch Fragen haben oder andere tolle Plugins zu diesem Thema kennen, hinterlasst einfach einen Kommentar!

Pin It on Pinterest