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:

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

Dies funktioniert problemlos beim Theme Twenty Seventeen. Einige andere Themes ändern zwar den Text in den sogenannten „Absätzen“, nicht jedoch Überschriften, etc.

Hierfür versuchen Sie bitte folgende kleine Ergänzung:

* {font-family: arial, verdana, sans-serif !important;}

Durch das !important wird versucht, anderweitige Regeln der Formatierung zu überschreiben.

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, und zusätzlich in diesem Artikel hier.

Und ergänzend noch zwei Artikel, die sich mit der Logik und dem Aufbau von CSS an sich befassen, das wären
Aufbau und Struktur von CSS in WordPress und
WordPress CSS Element finden und bearbeiten.

Dieser Beitrag hat 26 Kommentare

  1. Thomas

    Guten Tag,
    vielen Dank für dieses Tutorial.
    Ich wollte mit * {
    font-family: arial,verdana,sans-serif !important;
    } meine Seite http://www.klavierunterricht-radeberg.de am Herunterladen der standardmäßig vom Theme 2017 verwendeten Schrift aus dem Internet hindern.
    Im Quelltext findet sich aber immer noch der Link zu . Die Webfonts werden also wahrscheinlich heruntergeladen, dann aber durch das eigene css überschrieben.
    Ich möchte aber aus Datenschutzgründen ein Herunterladen von Vornherein ausschließen. Wie kann man hier vorgehen?
    Vielen Dank
    Thomas

    1. Hubert

      Hallo Thomas,
      hierzu gibt es verschiedene Möglichkeiten. Sehr gut zusammengefasst ist es in diesem Artikel hier von FastWP.
      Viel Erfolg und schöne Grüße
      Hubert

      1. Thomas

        Vielen Dank, das Plugin Disable & Remove Google Fonts macht genau das Richtige.
        Die Anzeige der Requests auf Pingdom funktionierte ohne Bezahlschranke nicht. Das geht aber auch gut über –> Untersuchen –> Sources!

        1. Hubert

          sehr schön, freut mich, dass das alles funktioniert hat!

  2. Tanja Seltenreich

    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. Hubert Hell

      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!

  3. Birgit

    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. Hubert Hell

      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. Hubert Hell

        …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;
        }

  4. 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

  5. Tabularaza

    Hallo, ich habe noch eine Frage. Wie kann ich im Twenty Seventeen lediglich die Farbe der Schrift im Menü ändern? Finde irgendwie den korrekten CSS Code nicht.

    1. Hubert Hell

      das sollte mit diesem Code funktionieren – erste Zeile für das Hauptmenü, zweite Zeile für das erste Untermenü. Als Beispiel inkl. CSS, wie es im Customising einzufügen ist, habe ich diesen Screenshot hier erstellt:

      Hauptmenü:
      .main-navigation li a {color: red!important;}

      Untermenüpunkte:
      .main-navigation li li a {color: blue!important;}

      Viel Erfolg!

      1. Tabularaza

        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. Hubert Hell

          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!

  6. Oliwan

    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. Hubert Hell

      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. Oliwan

        !Top – vielen Dank für Ihren Einsatz!
        Liebe Grüße
        Oliwan

  7. Nils Fröhlich

    Hallo,

    wie kann die Schriftfarbe generell ändern? Im Bereich „Customizer“ geht leider nur die Farbe im Header.

    1. Hubert Hell

      Hallo Herr Fröhlich,
      versuchen Sie es mal hiermit – im Custom CSS geben Sie ein: body {color:red}
      Viel Erfolg!

  8. Thomas

    Hallo Herr Hell,

    kann man darüber auch „nur“ die Überschrift, also den Header vor dem Bild ändern?

    1. Hubert Hell

      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. Thomas

        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. Hubert Hell

          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. Marco

        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.

        1. Hubert Hell

          das ist natürlich eine ebenfalls sehr elegante und schlanke Lösung. Danke für den Tipp!

Schreibe einen Kommentar