In diesem 101 WordPress Tutorial von Host Europe geben wir Ihnen einen grundlegenden Überblick über das Thema Typografie und wir zeigen Ihnen, welche drei einfachen und schnellen Möglichkeiten Sie haben, Schriftarten in WordPress zu verändern. Und das Schritt für Schritt.

Wichtige Informationen zu WordPress Schriftarten vorab

Es gibt viele Möglichkeiten, Schriftarten in WordPress zu ändern. Das Gute: Sie müssen kein Programmierer sein. Wir schauen uns drei einfache und sichere Möglichkeiten an:

  1. Die Schriftart über das aktive Theme zu bearbeiten.
  2. Die Schriftart über ein Plugin hinzufügen.
  3. Die Schriftart über eine CSS File hinzufügen.

Schriftart in WordPress ändern #1 – Schriftart über das aktive Theme bearbeiten

Die erste Möglichkeit besteht darin, die Schriftart über das aktive Theme zu bearbeiten.

Die meisten Premium-WordPress-Themes bieten Ihren Zugriff auf die gesamte Suite von Google-Schriftarten. Schauen wir uns also an, wie dies mit dem aktuellen Theme möglich ist. Gehen Sie zu “Design”, “Customizer” und “Typografie”.

Hier haben Sie eine Reihe an tollen Optionen für das Schriftarten-Typografie-Styling Ihres Textes auf der Website, einschließlich eines Dropdown-Menüs, in dem Sie zwischen einer Vielzahl von Google-Schriften wählen können. Auch die Farbe und die Größe können Sie hier schnell und einfach ändern.

Schriftart in WordPress ändern #2 – Schriftart über Plugin hinzufügen und bearbeiten

Die zweite Möglichkeit ist die Bearbeitung mit einem Plugin.

Wenn das Theme zum Beispiel nicht über verschiedene Schriftarten verfügt, können Sie dies mit einem Plugin dennoch bearbeiten. Gehen Sie auf “Plugins” und suchen Sie nach dem Plugin Google Fonts Typografie. Installieren und aktivieren Sie das Plugin. Hiermit haben Sie Zugriff auf die Schriftbibliothek von Google. Ein solches Plugin ist die einfachste Methode, um eine Schriftart in WordPress zu ändern, wenn das Theme dies nicht bereits zulässt. Auch hier können Sie die Schriftarten ändern, Farben verstellen und die Größe anpassen.

Schriftart in WordPress ändern #3 – Schriftart über eine CSS File hinzufügen und bearbeiten

Die dritte und letzte Möglichkeit, die wir uns anschauen, ist die Bearbeitung über eine CSS-File.

Wenn Sie sich beim Bearbeiten von Codes wohlfühlen, können Sie Schriftarten in WordPress auch manuell ändern. Um eine neue Schriftart in WordPress per Code hinzuzufügen, benötigen Sie die Schriftartdatei, die Sie mit Grundkenntnissen über CSS und einem FTP-Zugriff über einen Client wie die FileZilla verwenden möchten.

Google Fonts für WordPress

Der erste Schritt in diesem Prozess besteht darin, den Link zu Ihrer Schriftarten zu kopieren. Sie können die gewünschte Schriftart bei Google downloaden. Kopieren Sie den Abschnitt Ihrer gewünschten Schriftart.

Nun gehen Sie auf Ihre FTP File im Stammverzeichnis des Child-Theme und öffnen die functions.php.

Geben Sie dann den folgenden Code ein und ersetzen Sie den Link durch den Code für Ihre gewählte Schriftart.

function add_my_font() {
wp_enqueue_style( 'add_my_font', 'https://fonts.googleapis.com/css2?family=
Staatliches&display=swap', false );
}
add_action( 'wp_enqueue_scripts', 'add_my_font' );

Sie müssen jetzt „deklarieren“, wo Ihre Schriftart verwendet werden soll. Dazu öffnen Sie die style.css und fügen folgenden Code hinzu:

.body, h1, .h2, .h3, .h4 {
font-family: 'Staatliches', sans-serif;}

Nun fügen Sie den Namen Ihrer Schriftart ein. Dieser Code sagt Ihrem Frontend im Wesentlichen, dass Sie diese bestimmte Schriftart verwenden möchten.

Beachten Sie, dass Sie einige dieser Deklarationen entfernen könnten, wenn die neue Schriftart nur für bestimmte Abschnitte gelten soll.

Wichtiger Datenschutz-Hinweis: Das Landgericht München hat am 20.01.2022 geurteilt, dass die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform ist. Daher empfehlen wir, externe Schriftarten wie Google Fonts serverseitig einzubinden. Siehe Datenschutz und Informationsfreiheit, FAQ zu Cookies und Tracking 2.4.

Fonts von Drittanbietern für WordPress

Wenn Sie mit einer Schrift von einem Drittanbieter arbeiten, sind dies die gleichen Schritte. Laden Sie Ihre gewünschte Schrift und kopieren Sie die Schriftdateien. Schauen Sie im Theme, ob Sie einen Schriftordner haben und falls nichts, legen Sie einen an. Nun gehen Sie auf die style.css und geben Sie diesen Block-Code ein:

<p>@font-face { </p> font-family: Kind Of Rock;
src:url(http://test-site.com/wp-content
/themes/twentytwenty/fonts/Kind Of Rock.ttf);
font-weight: normal; }

Wechseln Sie die Namen im aktuellen Theme und der Schriftart gegen das aktuelle Theme und der heruntergeladenen Schrift aus.

Sie müssen jetzt wieder „deklarieren“, wo Ihre Schriftart verwendet werden soll und folgenden Code hinzufügen. Geben Sie den Namen Ihrer gewünschten Schriftart ein.

.body, .h1, .h2, .h3, .h4 {
font-family: 'Kind Of Rock', sans-serif;}

Wie Sie Schriftart in WordPress ändern – Zusammenfassung

Fassen wir noch einmal zusammen. Sie haben drei Möglichkeiten kennengelernt, wie Sie die Schriftart in WordPress verändern können. Über das aktive Theme, über ein Plugin oder über eine CSS File.

Wir hoffen, dass Ihnen das Tutorial geholfen und gefallen hat. Wenn Sie weitere Fragen zu WordPress haben, so gehen Sie auf unseren Blog oder schauen Sie sich unsere anderen 101 WordPress-Tutorials von Host Europe an.

Sie möchten schnell und einfache eine sichere WordPress-Webseite einrichten? Sie suchen eine zuverlässige Hosting-Lösung für Ihre bestehende Webseite? Die Lösung: Managed WordPress von Host Europe schon ab 2,99€ pro Monat. Selbstverständlich mit kostenlosem SSL-Zertifikat und täglichem Malware-Scan. Mehr zu den WordPress Hosting-Produkten von Host Europe.

Die wichtigen Links und weitere Informationen finden Sie hier:

Unsere WordPress-Video-Tutorials im Überblick

Titelmotiv: Photo by CHUTTERSNAP on Unsplash

Letzte Artikel von Wolf-Dieter Fiege (Alle anzeigen)

Schreibe einen Kommentar

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

Die von Ihnen hier erhobenen Daten werden von der Host Europe GmbH zur Veröffentlichung Ihres Beitrags in diesem Blog verarbeitet. Weitere Informationen entnehmen Sie bitte folgendem Link: www.hosteurope.de/AGB/Datenschutzerklaerung/