blog

Font Type ändern bei WordPress Theme „Twenty Seventeen“

Das WordPress Theme „Twenty Seventeen“ ist das derzeit neueste kostenlose Theme von und für WordPress. Eine Sache, die mir sehr gut gefällt, ist die Möglichkeit, die Schriftart (Font Type) ohne großen Aufwand zu ändern.

Was steckt dahinter?

Der Default Font Type für das WordPress Theme „Twenty Seventeen“ ist Libre Franklin. Einigen mag das gefallen, ich finde diese Schriftart grauenhaft. Vor allem bei fett markierten Texten sagt mir das komische Layout des „i“ überhaupt nicht zu. Den Punkt konnte ich kaum vom unteren Teil des Buchstabens unterscheiden – nein danke, so nicht.

Ich wollte eine andere Schriftart nutzen. Und habe mit großer Freude festgestellt, dass das Ändern der Schriftart beim WordPress Theme „Twenty Seventeen“ sehr einfach ist.

Nachtrag vom 19.03.2018: In diesem Artikel hier erläutere ich kurz, wie Sie die Schriftart für die komplette Seite umstellen können (und in den Kommentaren stehen zahlreiche weitere WordPress Tipps). Wie Sie nur einzelne Teile Ihrer Website ändern, z.B. den Titel Ihrer Seiten oder die Farben des Navigationsmenüs, das erfahren Sie in meinem Artikel „12 einfache WordPress CSS Tipps – ohne Programmierkenntnisse“.

Plugin oder Child Theme zum Ändern des Font Type?

Ich wollte lediglich für alle Zeichen meines Blogs einen anderen Font Type. Ganz einfach: alles bitte in Arial. Die zwei häufigsten gefundenen Vorschläge im Netz:
– Plugin installieren
– Child Theme anlegen.

Sollte ich ein Plugin installieren? Es gibt zwar einige Vorteile, dieses oder jene Plugin zum Einstellen der Schriftart zu installieren. Mit einigen kann man allerhand anstellen, sehr nützliche bis hin zu sehr abenteuerlichen Sachen. Das schien mir jedoch etwas übertrieben. Zudem versuche ich, die Anzahl der Plugins gering zu halten. Somit: nein.

Dann also ein Child Theme anlegen? Nein, danke, ebenfalls nicht. Das Prinzip und die Vorteile von Child Themes habe ich verstanden. Die Muße, mich „jetzt“ damit auseinander zu setzen, habe ich jedoch nicht.

Wie kann die Schriftart in Twenty Seventeen einfach geändert werden?

Hätte ich mir das Theme „Twenty Seventeen“ beim Installieren etwas genauer angeschaut, wäre mir das Suchen erspart geblieben. „Twenty Seventeen“ liefert eine sehr einfache Lösung zum Ändern des Font Types mit. Herrlich!

Was benötigen Sie, um die Schriftart in Twenty Seventeen zu ändern?

Erstens, Sie müssen wissen, wo es geändert wird.

Zweitens, ein klein bisschen CSS-Code.

Fertig.

Zum ersten Punkt: Wo kann der Font Type beim Theme „Twenty Seventeen“ geändert werden?

Im WordPress Hauptmenü wählen Sie die Schritte

– Design / Customizer
– anschließend auf der linken Seite ganz unten „Zusätzliches CSS“.

In dem nun erscheinenden kleinen weißen Feld können Sie CSS-Code einfügen, ohne Child Themes anlegen oder anderweitig im Theme-Code tätig werden zu müssen.

Um den Font Type für die gesamte Seite zu ändern, ist lediglich folgender Code erforderlich:

body {font-family: arial, verdana, sans-serif;}

 

Font Type ändern für WordPress Theme Twenty Seventeen
Font Type ändern für WordPress Theme Twenty Seventeen – im Customizing / Zusätzliches CSS

Was bedeutet der CSS-Code (in Kurzform)?

Für die gesamte Website bedeutet der oben aufgeführte CSS-Code: Setze die Font-Family für die komplette Seite auf Arial. Wenn Arial vom Browser Ihres Besuchers nicht unterstützt wird, nimm Verdana. Falls das ebenfalls nicht unterstützt wird, wird Sans-Serif genommen.

Die offiziellen Bezeichnungen und Schriftweisen der verschiedenen Schriftarten können Sie mit der Suchmaschine Ihres Vertrauens leicht herausfinden. Tragen Sie Ihre bevorzugten Schriftarten ein, speichern Sie das Customizing und schon ist die Schriftart (der Font Type) geändert.

Zahlreiche weitere Tipps zu WordPress und „Zusätzliches CSS“ finden Sie in diesem Artikel hier.

 

WordPress-Einsteiger?

Sie sind WordPress-Einsteiger und möchten sich lieber auf Inhalte statt auf technische Themen bzw. das Setup konzentrieren? Dann wäre der WordPress Starter-Service vielleicht was für Sie… ich freue mich auf Ihre Kontaktaufnahme.

 

Hat Ihnen der Artikel weitergeholfen?

Weiterhin viel Erfolg mit WordPress und Ihrer Website!

Haben Sie Fragen zu WordPress CSS, benötigen Hilfestellung bei einem WordPress Thema? Hinterlassen Sie gerne einen Kommentar. Ich freue mich auf Ihre Zeilen!

 

 

22 Gedanken zu „Font Type ändern bei WordPress Theme „Twenty Seventeen“

  1. Lieber Hubert,

    erstmals herzlichen Dank für deinen tollen Support!! Wahnsinn! Ich konnte mir hier als ABSOLUTER Newbie schon etliche Tipps zu Problemen holen, an denen ich fast verzweifelt wäre.

    Nun verzweifle ich wieder! 😉

    Ich versuche die vorinstallierten Bilder ( nicht den Header) auszutauschen und komme keinen Meter weiter. Außerdem finde ich keine Funktion, in denen ich ein Bild im Text ( meins, in der „Über Mich“- Seite) einbinden kann. Bitte, könntest du mir dabei helfen? Ich danke dir bisweilen schon einmal sehr, für deine ganzen anderen Tipps, die mich bisher weitergebracht haben!

    Herzliche Grüße
    Tanja

    1. Hallo Tanja,
      das sollten und werden wir hinbekommen. Ich melde mich bei Dir per E-Mail, anschließend können wir gerne telefonieren und Deine Themen angehen.
      Übrigens: Es wird hier noch mehr „Newbie-Tipps“ geben – am besten also in die Mailingliste eintragen und nichts verpassen 😉
      Viele Grüße & sonnigen Dienstag!

  2. hallo!
    Vielen Dank, das hat an sich super funktioniert, auch nur den Header zu Courier new zu ändern und den body Text zu Corbel.
    Aber jetzt ist nur auf der Startseite meine Header Überschrift in Courier new, bei allen anderen Seiten ist sie in Corbel (also die Schrift auf dem Bild) – wie kann ich das ändern…?
    Sorry, bin auch ziemlicher newbie, zumindest was solche Basteleien betrifft 😉 Danke für jede Hilfe!
    Liebe Grüße und schönen Sonntag
    Birgit

    1. Hallo Birgit,
      das sollten wir doch hinbekommen… ich habe ein paar Rückfragen dazu, zusätzlich ist mir bei Deiner Website etwas anderes aufgefallen. Ich werde Dir heute Nachmittag/Abend eine Mail hierzu schicken.
      Ebenfalls schönen Sonntag,
      Hubert

      1. …und hier der Vorschlag, mit welchem Code der Seitentitel und die Seitenbeschreibung individuell angepasst werden können:

        Seitentitel:

        .site-title, .site-title a {
        color: red !important;
        font-family: courier new !important;
        font-size: 23px !important;
        }

        Seitenbeschreibung:

        .site-description, .site-description a {
        color: blue !important;
        font-family: verdana !important;
        font-size: 20px !important;
        }

  3. Guten Tag!
    Einfachheit und Robustheit sind heute angesagt. 🙂
    Für meine Romanauszüge würde ich gerne zwei neue Absatzformate erstellen. Den ersten Absatz ohne Erstzeileneinzug (Roman1), den zweiten (Roman2) mit Erstzeileneinzug von 0,5 cm, 1 em (oder wie man das auch immer definiert.)
    Wichtig: Beide Absatzformate sollen keinen Abstand danach haben.
    Zusätzlich die Info, dass ich Tiny MCE installiert habe.
    Geht das auch so einfach?
    Danke, M.W. Fischer

      1. Hallo,
        das hat super funktioniert besten Dank.
        1 Frage habe ich noch. Ich habe eine recht große Überschrift & Titel oberhalb des Menüs stehen, was am normalen PC Monitor auch normal angezeigt wird. Jetzt die Frage, was muß ich einfügen, damit sich die Schrift im Responsive Design (mobile Endgeräte) entsprechend verkleinert? Derzeit ist es so, dass der Text nur teilweise angezeigt wird, also nicht entsprechend für das Display verkleiner wird.
        Gute Idee?
        Danke & Gruß

        1. persönliche Erfahrung mit individueller Codierung für Responsive Design habe ich keine, versuchen Sie es bitte mal auf dieser Website hier. Es wird gut beschrieben, wie die Größenverhältnisse der einzelnen Bausteine zueinander festgelegt werden und sich auch bei geänderter Darstellung (Bildschirmgrößen) korrekt einordnen.
          Schöne Grüße & viel Erfolg!

  4. Hallo Herr Hell!
    Danke für dieses Post. Eine Frage – was ist wenn das Theme in der Zukunft „aktualisiert“ wird – überschreiben sich dann nicht diese nachträglich gemachten Änderungen in der CSS – und man muss nach jedem Themeupdate immer wieder diese Korrekturen durchführen?
    Danke für Ihre Antwort schon im voraus (bin totaler WP newbee, deshalb hoffe ich auf Verständnis für diese evtl. doofe Frage!)
    Oliwan
    may the source be with you

    1. Hallo Oliwan,
      sehr erfreulich, dass Sie bereits an die Zukunft denken 😉
      Bei Theme-Updates werden die im Additional CSS hinterlegten Änderungen nicht überschrieben. Da ich noch einen Theme-Update ausstehen hatte, habe ich diesen gerade durchgeführt und das vorher/nachher beim Additional CSS dokumentiert – wird nicht überschrieben und ich hoffe, es bleibt auch künftig so…
      Viel Erfolg und Spaß mit WordPress!

    1. Hallo,
      nein, die im Artikel aufgeführte Beschreibung zum Ändern des Font Type ist eine generische Einstellung für die komplette Seite.
      Änderungen für einzelne Überschriften oder andere Textartenbereiche lassen sich am Einfachsten über Plugins einstellen. Es gibt diverse Plugins, die dies hervorragend für alle WordPress Themes umsetzen – bitte einfach die Suchmaschine des Vertrauens bemühen und nach Plugin WordPress Typographie (o.ä.) suchen. Sollte es nicht klappen, bitte gerne nochmal melden.
      Viel Erfolg dabei und schöne Grüße!

      1. Hallo Herr Hell,

        herzlichen Dank. Die Plugins habe ich nachher auch gefunden, aber da wird mir von meinen Entwickler-Kumpels immer abgeraten zu viele von zu verwenden 😉 Habe es aber jetzt nach Ihrer Empfehlung auf die ganze Seite gestellt. Ist auch in Ordnung.

        Danke also nochmal!

        Beste Grüße

        Thomas

        1. bitte, gern geschehen. Und es freut mich, dass ich helfen konnte.
          Ihren Entwickler-Kumpels stimme ich übrigens zu – je weniger Plugins, desto besser. Manchmal geht es jedoch nicht ohne WordPress Plugin, v.a. wenn man kein Entwickler ist 😉
          Viel Erfolg weiterhin und schöne Grüße!

      2. Hallo,

        noch einfacher geht es, wenn du statt

        body {font-family: arial, verdana, sans-serif;}

        h1 {font-family: arial, verdana, sans-serif;}
        (Für h1 Überschriften)

        in das Feld beim zusätzlichen css einträgst. Überschriften sind überlicherweise mit h1, h2, h3, h4, h5 oder h6 im Quellcode deklariert. Damit änderst du dann also nur die Schriftart der Überschriften.

        PS: Habe diesen Artikel gefunden, weil ich wissen wollte, wie ich mittels child theme die CSS für Franklin entfernen kann und meine eigene Schrift hinzufüge. Schließlich wird Franklin auch geladen wenn man sie nicht nutzt. Diese Ladezeit möchte ich mir gerne sparen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.