Members Area
   

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:

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

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!

5 Kommentare

  • WordPress Schriften ändern » Beliebteste Suchbegriffe

    […] den Originalbeitrag weiterlesen: WordPress Schriften ändern Content/ Zitat Ende Klicken Sie einfach auf den Link unter "Beitrag weiterlesen", dann gelangen […]

  • V

    “Zunächst sucht ihr euch die Datei functions.php und fügt hier Folgendes hinzu:”

    das gab leider einen Serverfehler 500 und jetzt geht gar nicht mehr….

  • Marco Wilhelm

    Ui … Lade einfach deine alte function hoch und überschreibe deine neu bearbeitete, dann läuft wieder alles bestens. Sollte du deine Kopie deiner alten functin haben, lade die jetzige herunter, entferne den eingefügten Code und lade die Datei wieder hoch. Auch dann ist wieder alles wie vorher.

    Wo hast du den Schnipsel denn eingefügt? Ich den Code im “add action”-Bereich unterbringen. Achte darauf, dass du alle Zeiche kopiert hast.

  • Clemens Kappes

    Hallo Marco,
    danke für deinen tollen Tipp für die Anpassung der Zeilenhöhe. Leider löst er nicht ganz mein Problem. Denn in meinem Theme “Blue Diamond” sind offenbar die Schriften im Hauptkontent und in der Sidebar aneinander gekoppelt, zumindest was die Unterseiten angeht. Mich würde interessieren, ob und wie sich das ändern lässt.
    Danke für deine Hilfe,
    Clemens

  • Marco

    Hi, du müsstest dann für die Sidebar eine eigene Class in der PHP anlegen. Dann kannst du in der CSS diese Class ansprechen. Tipp: Installier dir mal für Firefox die Erweiterung Firebug. Wenn dies aktiviert ist, kannst du mit der Maus über die einzelnen Elemente der Seite gehen und schauen, welche Classes hier vergeben sind. Ich gehe mal davon aus, dass in deinem THeme für die Sidebar bereits eine Unterklasse angelegt ist, die du per CSS ansprechen kannst. VG

Hey, schreib mir deine Meinung!

1 + drei =