Wie man Fonts in WordPress ändert (und die Größe, Farbe ändert und sie Optimiert)

Fonts können den Unterschied zwischen einer langweiligen und einer schönen Webseite ausmachen. Indem du lernst, wie man die Schriftart in WordPress ändert, kannst du deine Webseite modern, professionell und gebrandet aussehen lassen.

Aber was ist der beste Weg, um Schriften in deiner WordPress-Seite zu verwenden, und wie wählst du die richtigen Schriften für dein Theme?

In diesem Leitfaden werde ich dich durch alles führen, was du über Schriften in WordPress wissen musst. Du wirst mehr über folgendes erfahren:

Fonts: Die Terminologie

Beginnen wir mit einem Blick auf die Terminologie rund um Fonts im Web.

• Webfonts (aka HTML-Schriftarten) sind Fonts, die auf einer Webseite eines Drittanbieters gehostet und mit denen auf deiner Webseite verlinkt ist.
• Lokal gehostete Fonts sind genau das (auf den Servern deiner Webseite gehostet).
• Websichere Schriften sind eine begrenzte Anzahl von Schriften, die auf (fast) allen Computern vorinstalliert sind und auf die du ziemlich sicher sein kannst, dass alle deine Besucher Zugriff haben.

Werfen wir einen Blick auf die Optionen zum Hinzufügen von Fonts zu deiner Webseite.

Wie man Schriften zu deiner WordPress-Seite hinzufügt (die Optionen)

Bevor du in das Hinzufügen von Schriften zu deiner Webseite einsteigst, hilft es dir, wenn du die dir zur Verfügung stehenden Optionen verstehst.

Fonts sind Teil des Designs deiner Webseite, daher werden sie in den meisten Fällen über dein Theme programmiert – aber nicht immer. In einigen Fällen kannst du dich entscheiden, ein Plugin zu verwenden, um eine größere Auswahl an Schriften auf deiner Webseite zu ermöglichen.

Hier sind einige der Optionen, die dir zur Verfügung stehen:

• Verwende Webfonts wie Google Fonts, indem du ein Plugin installierst, das dir Zugriff gewährt.
• Verwende Webfonts, indem du sie in dein Theme programmierst und in eine Reihe stellst (nicht so kompliziert wie es klingt).
• Hoste deine Schriften auf deiner eigenen Webseite und füge sie deinem Theme hinzu.

Es gibt zwei Hauptunterschiede – ob du Webfonts verwendest, die außerhalb deiner Webseite gehostet werden, oder ob du deine Fontdateien selbst hosten möchtest. In diesem Leitfaden werden wir uns mit den Vor- und Nachteilen jedes einzelnen befassen.

Beginnen wir mit einem Blick auf Webfonts: Warum du dich entscheiden könntest, sie zu verwenden und wie du sie zu deiner Webseite hinzufügen kannst.

Verwendung von Webfonts in WordPress

Webfonts sind die beliebteste Art, Schriften zu deiner Webseite hinzuzufügen, da sie es einfach machen, eine große Auswahl an Schriften hinzuzufügen.

Was sind Webfonts?

Webfonts sind Fonts, die auf der Webseite eines Drittanbieters gehostet werden. Anstatt die Dateien auf deine eigene Webseite zu kopieren, verlinkst du auf die Webseite des Anbieters und sie werden von dort aus abgerufen.

Das bedeutet, dass du Zugriff auf eine große Auswahl an Schriften hast, ohne den Serverplatz auf deinem eigenen Hosting nutzen zu müssen. Es bedeutet auch, dass du, wenn sich die Schriftartendateien im Laufe der Zeit ändern sollten, deine Dateien nicht aktualisieren musst und automatisch Zugriff auf die neuen Versionen der Dateien vom Anbieter hast.

Webfonts können kostenlos sein oder du kannst sie bezahlen, normalerweise über ein Abonnement. Einige beliebte Anbieter sind:

• Google-Fonts. Der größte Anbieter von kostenlosen Webfonts. Du kannst auch alle ihre Schriften auf deinen Computer herunterladen, d.h. wenn du Offline-Materialien mit den selben Schriften wie deine Webseite erstellen möchtest, kannst du das tun. Und alles ist kostenlos.
• Adobe Edge Webfonts. Diese sind ebenfalls kostenlos. Sie sind zwar für die Verwendung mit Adobe-Produkten konzipiert, funktionieren aber auf jeder Webseite gut.
• Fonts.com ist ein Premium-Anbieter von Schriften, die du möglicherweise verwenden musst, wenn du deine Web-Schrift an eine Schriftart aus deinem Druckmaterial anpassen musst und die Schriftart nicht über einen kostenlosen Anbieter erhältlich ist.
• fontfabric ist ein Schriftdesigner, der Premium-Schriften für den Einsatz als Webfonts und online anbietet. Du musst für diese bezahlen, bekommst aber etwas Individuelleres als wenn du Google-Schriften benutzt hättest.

Alle diese Anbieter ermöglichen es dir, die Schriften direkt von ihren Servern aus zu verwenden, indem du einen Code zu deiner WordPress-Seite hinzufügst oder manchmal ein Plugin verwendest, das bedeutet, dass du keinen Code hinzufügen musst.

Webfonts unterscheiden sich von websicheren Fonts. Du kannst diese als Fallback für Webfonts verwenden, nur für den Fall, dass dein Webseiten-Besucher aus irgendeinem Grund keine Verbindung zur Webfonts herstellen kann. Ich werde dir später in diesem Beitrag zeigen, wie man das macht.

Warum Webfonts verwenden?

Jetzt weißt du also, was Webfonts sind, warum würdest du sie verwenden, anstatt deine eigenen Fonts zu hosten?

Hier sind einige der Vorteile:

• Einfachheit: Das Hinzufügen von ein paar Zeilen Code oder die Installation eines Plugins ist schneller als das Herunterladen und Hochladen der Schriftdateien und macht es einfacher, die Schriftarten zu ändern, wenn du dich in Zukunft dafür entscheidest.
• Auswahl an Schriften: Es gibt Tausende von Fonts, die als Webfonts verfügbar sind, und die Liste wächst ständig.
• Aktualisierungen: Wenn die Font-Datei aktualisiert werden muss, z.B. um variable Schriften hinzuzufügen (mehr davon in Kürze) oder um zusätzliche Zeichen hinzuzufügen, hat deine Webseite Zugriff auf die neue Version, ohne dass du etwas tun musst.

Die meisten Webseiten verwenden Webfonts, mit einer websicheren Schriftart als Backup. Und mit WordPress ist es sehr einfach.

Finden der besten Webfonts für deine Webseite

Nachdem du dich entschieden hast, Webfonts zu verwenden, hast du jetzt eine schwierige Entscheidung zu treffen: Welche Schriften sollst du verwenden?

In den guten alten Zeiten, in denen alle Webentwickler Zugang zu diesen vorinstallierten websicheren Schriften hatten, war dies eine sehr einfache Entscheidung. Willst du eine Serifenschrift oder eine Serifenlose verwenden? (Serifenschriften haben eine kleine Linie oder einen Strich am Ende eines größeren Strichs in jedem Zeichen, serifenlose Schriften nicht.) Nachdem du diese Entscheidung getroffen hast, waren deine Entscheidungen sehr begrenzt.

Aber jetzt hast du die Qual der Wahl.

Hier sind einige Tipps, die dir helfen sollen, die beste Schriftart für deine Webseite auszuwählen:

• Schaut euch eure Druckerzeugnisse an. Werden bereits Schriften verwendet, die du als Web-Schriften finden kannst? Wenn nicht, kannst du etwas Ähnliches finden?
• Sieh dir die Webseiten deiner Mitbewerber an. Welche Arten von Schriften verwenden sie? Ich empfehle dir nicht, sie zu kopieren, aber es kann bestimmte Stile geben, die den Benutzern deiner Webseite die richtige Art von Bild vermitteln.
• Überlege, welche Art von Stimmung du mit deinen Fonts vermitteln möchtest. Einige Fonts sehen moderner aus, andere traditioneller. Einige machen Spaß, andere sind ernster.
• Halte dich an Fonts, die für Fließtext gut lesbar sind, und verwende interessantere Fonts für Schlagzeilen, wenn du willst.
• Wähle aus den beliebtesten Google-Schriften – diese sind den Besuchern der Webseite vertraut und leicht zu lesen.

Sobald du deine Schriften ausgewählt hast, kannst du einige Zeit damit experimentieren. Schriftanbieter wie Google Fonts lassen dich benutzerdefinierten Text eingeben, um zu sehen, wie er in deiner gewählten Schriftart aussieht. Sobald du deinen eigenen Text in der Schriftart siehst, kann es dir helfen zu entscheiden, ob das die richtige Schriftart für dich ist.

Und denk daran, die Verwendung von Webfonts macht es sehr einfach, deine Fonts zu ändern, so dass du jederzeit zu einer anderen Option wechseln kannst, während du dein Theme entwickelst oder deine Webseite einrichtest.

Wie man Webfonts mit einem WordPress Plugin hinzufügt

Du hast also die von dir gewählte Schriftart gewählt, jetzt ist es an der Zeit, sie zu deiner Webseite hinzuzufügen.

Wenn du dich nicht wohl fühlst, Code zu deinen Themedateien hinzuzufügen, kannst du ein Plugin installieren, mit dem du auf Google-Schriften zugreifen und jede beliebige Schriftart auf deiner Webseite verwenden kannst.

Das Google Fonts Typography Plugin ermöglicht dir den Zugriff auf die gesamte Bibliothek der Google-Schriften und deren Überprüfung über den WordPress Customizer.

Installiere das Plugin auf deiner Webseite wie jedes andere Plugin und aktiviere es dann.

Gehe zu Appearance > Customize, um auf den Customizer zuzugreifen. Du siehst einen Abschnitt für Google-Fonts.

Klicke auf diesen Link, um auf die Einstellungen für deine Fonts zuzugreifen. Konfiguriere sie wie folgt:

Grundeinstellungen: Konfiguriere die Standardschriftart für deinen Text und deine Überschriften sowie für alle Schaltflächen. Im Screenshot unten sieht man, dass ich eine leicht lesbare Serifenschrift für den Body und eine markantere Schrift für die Überschriften hinzugefügt habe.

Erweiterte Einstellungen: Hier kannst du Branding (Seitentitel und Beschreibung), Navigation (dein Menü), Inhalte und Überschriften detaillierter konfigurieren, deine Seitenleiste und Fußzeile. Du kannst auch Schriften laden, ohne sie irgendetwas zuzuordnen, was bedeutet, dass du sie zu jedem benutzerdefinierten CSS im Customizer hinzufügen kannst.

Laden der Schriftart: Wenn es irgendwelche Schriftarten gibt, die du nicht brauchst (z.B. fett gedruckt, kursiv, diese Art von Dingen), kannst du sie hier deaktivieren, damit sie deine Webseite nicht unnötig verlangsamen.

Debugging: Verwende dies, um zu erzwingen, dass alle Schriften angezeigt werden, wenn sie nicht wie gewünscht funktionieren.

Nimm dir etwas Zeit, um mit diesen Einstellungen zu arbeiten und sie im Customizer zu testen, um sicherzustellen, dass sie so funktionieren, wie du es willst. Wenn du mit deinen Einstellungen zufrieden bist, klicke auf die Schaltfläche Veröffentlichen. Verlasse den Customizer nicht, ohne auf Veröffentlichen zu klicken, da du sonst deine Änderungen verlierst.

Bearbeiten von Schriftfarben

Die kostenlose Version des Plugins erlaubt es dir nicht, die Farben deiner Schriften zu bearbeiten. Dazu musst du entweder die Premium-Version kaufen oder die Option Additional CSS im Customizer verwenden.

Gehe zurück zum Startbildschirm des Customizers und klicke auf die Registerkarte Additional CSS. Es wird dir ein leerer Textbereich angezeigt, in dem du dein eigenes CSS hinzufügen kannst.

Um das Element zu finden, das du zum Stylen benötigst, wähle es aus und benutze den Code Inspektor in deinem Browser, um herauszufinden, welche Farbgebung es bereits hat.

Unten benutze ich Google Chrome und habe auf ein h1-Element gezielt.

In meinem WordPress-Theme hat es seine Farbe vom Body-Element geerbt. Ich möchte etwas Konkreteres hinzufügen. Gib im Textfeld für dein CSS das CSS für dein Element und die Farbe ein, die du verwenden möchtest. Meins sieht so aus:

h1 {
 color: #f542f5;
}

Jetzt habe ich ein tolles pinkes h1 Element:

Du kannst dies mit allen Textelementen wiederholen, denen du Farbe hinzufügen möchtest, und auch mit allen, die du auch benutzerdefinierte Schriften hinzufügen möchtest, die nicht in den Optionen der anderen Bildschirme enthalten waren. Wenn du wissen möchtest, welches CSS für Schriften verwendet werden soll, lies weiter im Abschnitt dieses Beitrags über die Änderung deiner Schriften über CSS.

Wie man Webfonts manuell hinzufügt

Wenn du kein zusätzliches Plugin zu deiner Webseite hinzufügen möchtest und Zugriff auf den Code für dein Theme hast, kannst du Webfonts installieren und verwenden, indem du einen Code zu deiner Funktionsdatei und deinem Stylesheet hinzufügst.

Wenn deine Webseite ein maßgeschneidertes Theme verwendet, das du bearbeiten kannst, dann kannst du die Funktionsdatei und das Stylesheet aus deinem Theme bearbeiten. Aber wenn du ein Theme von Drittanbietern verwendest, das du gekauft oder aus dem WordPress-Themeverzeichnis erhalten hast, dann musst du ein Child-Theme erstellen. Du musst ihm dann zwei Dateien geben: functions.php und style.css.

Lasst uns den Prozess des manuellen Hinzufügens von Webfonts zu eurem Theme durcharbeiten. Ich werde in diesem Beispiel mit Google Fonts arbeiten, da dies die am häufigsten verwendete und kostenlose Schriftart ist.

Auswahl einer Schriftart und Aufnahme des Links

Beginne, indem du deine Schriftart aus Google Fonts auswählst. Füge es zu deiner Bibliothek hinzu, indem du auf das Plus-Symbol daneben klickst.

Klicke auf die Registerkarte am unteren Bildschirmrand für deine Bibliothek und du wirst einige Codes sehen, die du zu deiner Webseite hinzufügen kannst. Wenn du zusätzliche Schriftarten und -stile hinzufügen möchtest, klicke auf die Registerkarte Anpassen und wähle die gewünschten aus. Gehe dann zurück zur Registerkarte Embed.

Kopiere den Code nicht genau: Du wirst ihn verwenden, aber anstatt die Schriftart im Abschnitt <head> des Headers deiner Webseite aufzurufen, wirst du die Schriftarten einreihen. Dies ist der richtige Weg, um es in WordPress zu tun.

Also, in meinem Fall gibt mir Google Fonts diesen Code:

Kopiere stattdessen aus dem Abschnitt Embed font nur den Link zur Schriftart.

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

Ich muss aber nur das kopieren:

https://fonts.googleapis.com/css?family=Raleway

Einreihen der Schriftart(en)

Öffne die Funktionsdatei deines Themes und füge folgendes hinzu, indem du den Link für meine Schriftart durch den Link ersetzt, den Google dir für deine gegeben hat:

function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );

Dadurch wird der Style von den Google Fonts-Servern angefordert. Wenn du in Zukunft weitere Schriften hinzufügen musst, kannst du entweder eine neue Zeile zu deiner Funktion hinzufügen oder sie in die selbe Zeile einfügen:

function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Merriweather|Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );

Dadurch werden sowohl die Schriftarten Merriweather als auch Raleway in die Warteschlange gestellt.

Hinzufügen der Schriftart(en) zu dem Stylesheet

Dadurch funktioniert die Schriftart auf deiner Webseite noch nicht: Du musst sie trotzdem zum Stylesheet deines Themes hinzufügen.

Öffne die Datei style.css in deinem Theme und füge den Code hinzu, um einzelne Elemente mit deinen Webfonts zu gestalten. Stelle sicher, dass du es nach jedem vorhandenen CSS für Schriften hinzufügst, sonst wird es möglicherweise überschrieben.

Welche Elemente du stylest, hängt von dir ab, aber es ist üblich, eine lesbare Schrift für das Body-Element und etwas ausgefalleneres für die Überschriften zu verwenden.

body {
 font-family: 'Raleway', sans-serif;
}

h1, h2, h3 {
 font-family: 'Merriweather', serif;
}

In dem obigen Fall wird alles auf der Seite die Schriftart Raleway verwenden, mit Ausnahme der Elemente h1, h2 und h3, die Merriweather verwenden.

Speicher jetzt dein Stylesheet und überprüfe deine Webseite, um sicherzustellen, dass alles wie erwartet funktioniert. Wenn die neuen Schriften nicht angezeigt werden, lösche den Cache deines Browsers und überprüfe, ob die Schriften nicht durch ein Styling für Schriften weiter unten im Stylesheet überschrieben werden. Deshalb ist es eine gute Idee, entweder dein neues Styling am unteren Rand des Stylesheets hinzuzufügen oder das bestehende Styling durch dein neues Styling zu ersetzen (noch besser).

Hinzufügen einer Backup-Schriftart

Es kann Gelegenheiten geben, bei denen jemand deine Webseite besucht und aus irgendeinem Grund nicht auf die Webfont-Dateien zugreifen kann. Vielleicht sind sie auf einer schlechten Verbindung oder mit einem alten Gerät, das keine Webfonts rendert. Oder vielleicht hat dein Webfont-Provider technische Probleme.

Aus diesem Grund ist es eine gute Idee, ein Backup vor Ort zu haben.

Der Code, den du von Google-Schriftarten erhältst, hat bereits ein Backup, das die einfache Angabe von serif or sans-serif enthält, aber wir können noch einen Schritt weiter gehen.

Verwende eine der webfähigen Schriften, die bereits auf dem Computer deines Besuchers installiert sein werden, und füge dann den zweiten Fallback von nur serif or sans-serif hinzu, falls sie ein mobiles Gerät verwenden, das nicht einmal die webfähigen Schriften hat.

Gehe zurück zu deinem Stylesheet und bearbeite dein CSS, damit es so etwas wie dieses liest:

body {
 font-family: 'Raleway', Helvetica, sans-serif;
}

h1, h2, h3 {
 font-family: 'Merriweather', Georgia, serif;
}

Das bedeutet, dass die Besucher deiner Webseite deine Webfonts sehen werden, wenn alles in Ordnung ist; aber wenn nicht, werden sie Helvetica oder Georgia sehen, oder wenn dies nicht möglich ist, werden sie sehen, welche Serifen- und Sans-Serifen-Schriften ihr Browser laden kann.

Eigene Schriften in WordPress hosten

Einige Entwickler ziehen es vor, keine Webfonts zu verwenden, sondern Fonts auf ihren eigenen Servern zu hosten, und du könntest einer von ihnen sein.

Dies kann aus einem oder mehreren Gründen erfolgen, einschließlich Sicherheit, Leistung oder Budget.

Wenn du dir Sorgen um die Leistung machst, kannst du die Leistung deiner Webfonts auf verschiedene Weise optimieren, die später in diesem Beitrag behandelt werden. Aber wenn du dich entschieden hast, die lokale Route zu nehmen, musst du wissen, wie man es macht.

Warum eigene Schriften hosten?

Die Verwendung von Webfonts ist oft einfacher und kann dir mehr Flexibilität geben und gleichzeitig weniger Platz auf deinem Server einnehmen. Das bedeutet aber nicht, dass es keine Gelegenheiten gibt, bei denen das lokale Hosting von Schriften nicht besser geeignet ist.

Gründe, warum du Schriften lokal hosten solltest, sind unter anderem:

Du wirst vielleicht feststellen, dass du einige dieser Probleme umgehen kannst.

• Möglicherweise zieht man es vor, aus Sicherheitsgründen keine Ressourcen von Drittanbietern einzubeziehen, da man weiß, dass die Sicherheit der eigenen Webseite von einem selbst kontrolliert wird.
• Du wirst vielleicht feststellen, dass die Verwendung eines Dienstes eines Drittanbieters die Leistung deiner Webseite beeinträchtigt.
• Du hast vielleicht eine Schriftartendatei gekauft und möchtest diese verwenden. Stelle sicher, dass deine Lizenz sowohl die Nutzung der Webseite als auch die Verwendung in gedruckten Materialien umfasst.
• Deine Webseite kann lokal gehostet werden, z.B. in einem Intranet, und Benutzer haben keinen Zugriff auf Webfonts, wenn sie sie verwenden.

Wo du Fonts findest, die du lokal hosten kannst

Viele Webfonts können auch für die Verwendung als lokal gehostete Fonts heruntergeladen werden, aber du musst überprüfen, ob dies durch die Lizenz erlaubt ist. Im Falle von Google Fonts ist dies erlaubt.

Du wirst auch feststellen, dass es Fonts gibt, die nicht als Webfonts verfügbar sind, die du selbst herunterladen und hosten kannst. Jede Schriftdatei, die du auf deinen Computer herunterladen kannst, kann auch auf deine Webseite hochgeladen und dort gespeichert werden. Wenn du eine Schriftart verwenden musst, die nicht als Webfonts verfügbar ist, um sie mit deinem Branding zu verbinden, ist dies die Lösung, aber stelle sicher, dass deine Lizenz dies zulässt.

So fügt man lokal gehostete Schriften zu seiner WordPress-Seite hinzu

Du weißt also, dass du deine Fonts lokal hosten möchtest, wie gehst du vor, um sie einzurichten?

Der Prozess unterscheidet sich von der Verwendung von Webfonts. Du musst die Datei(en) auf deine Webseite hochladen und auf sie in deinem Stylesheet verlinken, ohne sie in deine Funktionsdatei einreihen zu müssen.

Herunterladen und Konvertieren der Schriften

Lade zunächst die gewünschten Schriften herunter. In Google Fonts kannst du dies tun, indem du auf das Download-Symbol klickst, wenn du die Schrift in deiner Bibliothek ansiehst.

Entpacke die Schriftartendatei auf deinem Computer und lösche alle Schriftarten, die du nicht auf deiner Webseite verwenden musst: Es hat keinen Sinn, Dateien hochzuladen, die du nicht verwenden wirst.

Um auf deiner Webseite verwendet werden zu können, müssen die Dateien im.woff-Format vorliegen. Wenn sie es nicht sind (das wird es nicht sein, wenn du sie von Google-Schriften hast), kannst du einen Dienst wie Convertio verwenden, um sie zu konvertieren.

Lade die Schriften zu deinem Theme hoch.

Lade nun die Schriftdatei(en) in dein Theme hoch, in wp-content/themes/themen/themename, wobei themename der Ordner für dein Theme ist. Es ist eine gute Idee, alle Schriftartendateien in einen eigenen Ordner im Theme zu legen, z.B. einen Font Ordner.

Wenn du mit einem Design von Drittanbietern arbeitest, erstelle ein Child-Theme für deine Schriftdateien und dein Stylesheet.

Sobald du das getan hast, musst du die Schriftart zu deinem Stylesheet hinzufügen.

Hinzufügen der Schriften in CSS

Öffne das Stylesheet deines Themes.

Füge Code wie diesen hinzu und ersetze die von mir verwendeten Schriften durch deine eigenen:

@font-face {
 font-family: ‘Raleway';
 src: url( “fonts/Raleway-Medium.ttf”) format(‘woff’); /* medium */
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: ‘Raleway';
 src: url( “fonts/Raleway-Bold.ttf”) format(‘woff’); /* medium */
 font-weight: bold;
 font-style: normal;
}

@font-face {
 font-family: ‘Merriweather';
 src: url( “fonts/Merriweather.ttf”) format(‘woff’); /* medium */
 font-weight: normal;
 font-style: normal;
}

Füge noch mehr hinzu, was du brauchst. Beachte, dass du, wenn du die Varianten Fett, Kursiv, etc. deiner Schrift verwenden möchtest, jede einzelne mit @fontface deklarieren und dann die Gewichtung oder den Stil für jede einzelne angeben musst, wie ich es oben mit Raleway für Fett- und Normaltexte getan habe.

Füge nun das Styling für deine Elemente hinzu, wie du es bei der Verwendung von Webfonts tun würdest:

body {
 font-family: 'Raleway', Helvetica, sans-serif;
 src: url( “/fonts/Raleway-Medium.ttf” );
}

h1, h2, h3 {
 font-family: 'Merriweather', Georgia, serif;
}

Deine lokal gehosteten Fonts funktionieren nun mit deinem Theme.

Wie man Fonts in WordPress ändert

Jetzt weißt du, wie du Fonts auf zwei Arten in deiner WordPress-Seite installieren kannst. Wie wäre es mit der Bearbeitung? Wie wäre es mit einer Änderung?

Du kannst deine Schriften auf eine von drei Arten bearbeiten: über den Customizer, im Post- oder Seitenbearbeitungsbildschirm oder mit CSS.

Betrachten wir jede dieser Optionen zum Ändern von Schriftstil, Farbe und Größe.

Wie man Schriftarten in WordPress ändert

Lasst uns sehen, wie wir das beide tun können, wenn ihr den Blockeditor oder den klassischen Editor benutzt.

Schriftarten im Blockeditor ändern (Gutenberg)

Wenn du eine aktuelle Version von WordPress mit dem Gutenberg-Editor verwendest, kannst du den Stil deines Textes ändern, wenn du ihn in deinem Beitrag oder deiner Seite bearbeitest.

Wähle den Block aus, den du bearbeiten möchtest, und darüber erscheint ein Styling-Menü.

Wähle den Text, den du bearbeiten möchtest, und klicke dann auf die Symbole, um ihn fett oder kursiv darzustellen. Wenn du auf den Pfeil neben diesen klickst, siehst du, dass du auch Durchstreichen auswählen kannst.

Ändern von Font-Stilen im Classic Editor

Wenn du eine ältere Version von WordPress verwendest oder das Classic Editor Plugin installiert hast, kannst du auch Schriftarten bearbeiten. (Wenn du den Gutenberg-Editor nicht willst, ist es besser, WordPress zu aktualisieren und Gutenberg zu deaktivieren.)

Der Classic Editor enthält eine Symbolleiste über dem Hauptbearbeitungsfenster, in der du die Stile deines Textes ändern kannst. Wenn du auf das Symbol zum Umschalten der Symbolleiste rechts klickst, kannst du auf weitere Optionen zugreifen, einschließlich Durchstreichen.

Ändern von Schriftarten im Customizer

Wenn du den Schriftstil für ein bestimmtes Element ändern möchtest, kannst du dies tun, indem du manuelles CSS zum Customizer hinzufügst.

Öffne den Customizer und klicke auf Additional CSS. Dadurch wird ein Bildschirm geöffnet, in dem du CSS eingeben kannst.

Jetzt kannst du das CSS für deine Fonts in das Feld eingeben. Wenn du also alle h1- und h2-Elemente in Kursivschrift ändern möchtest, würdest du dieses CSS hinzufügen:

h1, h2 {
 font-style: italics;
}

Ändern von Font-Stilen in dem Stylesheet

Wenn es dir leicht fällt, Code zu deinem Stylesheet hinzuzufügen, ist dies ein besserer Weg, dies zu tun.

Wenn du ein Theme eines Drittanbieters verwendest, erstelle ein Child-Theme für dein eigenes Styling, da sonst alle Änderungen, die du machst, beim Aktualisieren des Themes verloren gehen. Du musst ein Stylesheet im Child-Theme erstellen, um WordPress mitzuteilen, dass es sich um ein Child-Theme handelt: Dort legst du dein neues Font-Design an.

Wenn du dein eigenes Theme benutzt, kannst du das CSS in deinem eigenen Stylesheet bearbeiten und ändern. Die Datei ist style.css und du findest sie in deinem Themeordner unter wp-content/themes.

Füge am Ende deines Stylesheets eine beliebige Schriftart hinzu, damit sie nicht durch etwas bereits Vorhandenes aufgehoben wird. Oder noch besser, entfernen und überschreibe alle vorhandenen Schriftarten, es sei denn, du möchtest sie behalten.

Ändere die Stärke eines Elements mit Schriftart:

span.featured {
 font-weight = bold;
}

Ändere den Stil eines Elements mit font-style:

span.featured {
 font-style = italic;
}

Ändere die Ausrichtung mit der Textausrichtung:

span.featured {
 text-alignment: center;
}

Wie man Schriftfarben in WordPress ändert

Eine weitere Änderung, die du vornehmen kannst, ist die Änderung der Farbe eines bestimmten Textes auf deiner Webseite. Hüte dich davor, damit zu übertreiben: Dein Theme wurde mit Farben entworfen, die gut zusammenpassen, und wenn du zu viele Farben hinzufügst, könnte es grell und unprofessionell aussehen.

Schriftfarben in Gutenberg ändern

Mit den Gutenberg-Textblöcken kannst du Textfarbe und Hintergrund bearbeiten. Öffne dazu den zu ändernden Block und klicke auf die Registerkarte Farbeinstellungen im Abschnitt Block rechts auf dem Bildschirm.

Von hier aus kannst du die Hintergrundfarbe und die Textfarbe für Textblöcke bearbeiten.

Beachte, dass WordPress dich warnen wird, wenn die Kombination der Farben, die du verwendest, schlecht für die Barrierefreiheit ist, wie in dem Beispiel, das ich oben verwendet habe. Vermeide die Versuchung, mit deinen Farben über Bord zu gehen – schließlich hast du dein Theme gewählt, weil sein Farbdesign für deine Seite geeignet war, und das Hinzufügen von viel mehr Farben könnte es grell aussehen lassen.

Wenn du auf die Registerkarte Erweitert unterhalb der Registerkarte Farbeinstellungen klickst, kannst du diesem Block auch eine Klasse hinzufügen, die du dann im Customizer oder deinem Stylesheet gestalten kannst. Wenn du zum Beispiel eine Klasse von .featured zu deinem Block hinzugefügt hast, kannst du sie dann mit dieser Klasse gestalten.

Ändern von Schriftfarben im klassischen Editor

In der Symbolleiste des klassischen Editors kannst du die Farbe des ausgewählten Textes ändern. So kannst du ein einzelnes Wort auswählen und seine Farbe ändern. Unten habe ich einen Satz rot gemacht.

Obwohl dies theoretisch viel Flexibilität bietet, solltest du dich davor hüten, es übermäßig zu benutzen. Wenn du anfängst, deinem Text viel mehr Farben hinzuzufügen, könnte das zu einer Webseite führen, die schwer zu lesen und schlecht zugänglich ist.

Ändern der Schriftfarben im Customizer

Wenn dein Theme Optionen enthält, um das Farbschema der Webseite zu ändern, ist dies der beste Ort, um dies zu tun.

Zum Beispiel verwende ich auf der untenstehenden Webseite ein Theme, mit dem ich ein neues Farbschema für das gesamte Theme auswählen kann. Dies trägt dazu bei, dass die neuen Farben gut zusammenarbeiten und kohärent sind.

Die Optionen dafür variieren je nach Theme – einige Themes ermöglichen es dir, Überschriften, Links und andere Elemente auszuwählen und ihre Farbe zu ändern.

Wenn du bestimmte Elemente angreifen möchtest, um ihre Farbe zu ändern, dies aber keine Option für dein Design ist, kannst du CSS im Customizer hinzufügen.

Wähle Customize > Additional CSS und gib dein CSS in das Textfeld ein.

Wenn du beispielsweise die Farbe deiner h1-Headings ändern möchtest, gibst du diese ein:

h1 {
 color: #564534;
}

Wenn das nicht funktioniert, musst du möglicherweise spezifischere CSS hinzufügen. In meinem Theme ist die Farbe für den Link zur Seitenüberschrift mit der #site-title ID programmiert, daher muss ich dieses CSS hinzufügen:

#site-title a {
 color: #564534;
}

Ersetze die Farbe, die ich oben verwendet habe, durch deine eigene Farbe.

Wenn du mit deinen Änderungen zufrieden bist, klicke auf die Schaltfläche Veröffentlichen.

Ändern von Schriftfarben in deinem Stylesheet

Wie bei den Schriftarten kannst du auch das Stylesheet deines Themes bearbeiten (oder ein Child-Theme erstellen), um die Schriftfarben zu ändern.

Ändere die Farbe mit Farbe. Unten ändere ich die Hauptfarbe für den Text meiner Webseite, indem ich das body-Element verwende:

body {
 color = #222222;
}

Stelle sicher, dass du jedes vorhandene Styling für die selben Elemente überschreibst und dass du auch alle Elemente, die dieses Styling erben, stilisierst, wenn du möchtest, dass sie eine andere Farbe haben. Der gesamte Text erbt die Farbe des Body-Elements, es sei denn, er hat sein eigenes Styling.

Ändern der Schriftgröße in WordPress

Aus Gründen der Barrierefreiheit kannst du entscheiden, dass deine Schriften größer sein sollen, als sie standardmäßig in deinem Theme sind. Oder du könntest entscheiden, dass die Überschriften in deinen Widget-Bereichen zum Beispiel zu klein sind.

Schriftgröße in Gutenberg ändern

Mit dem Gutenberg-Editor kannst du die Größe des Textes innerhalb jedes Blocks ändern.

Wähle den Block aus und klicke dann auf die Registerkarte Texteinstellungen im Menü Blöcke auf der rechten Seite des Bildschirms. Du kannst den Text im Block kleiner oder größer machen, wie unten gezeigt.

Achte darauf, dies nicht zu sehr zu tun: Wenn alle Absätze auf deiner Seite unterschiedliche Größen haben, wird es unzusammenhängend aussehen und schwer zu lesen sein.

Ändern der Schriftgröße im klassischen Editor

Der klassische Editor bietet dir nicht die Möglichkeit, einen bestimmten Text auszuwählen und seine Größe zu ändern: Wenn du also diese Funktion benötigst, musst du auf Gutenberg aktualisieren. Entschuldigung!

Ändern der Schriftgröße im Customizer

Abhängig von deinem Theme hast du die Möglichkeit, die Schriftgrößen im Customizer zu ändern, entweder die Schriftgröße für die gesamte Webseite zu ändern oder Kopfzeilen und Text zu verwenden.

Wenn dein Theme keine Customizer-Option zum Ändern der Schriftgröße enthält, du aber die Option Additional CSS verwenden kannst. Gehe zu Customize > Additional CSS und gib das CSS in das Feld ein.

Unten mache ich die Überschriften in den Widget-Bereichen größer, mit diesem CSS:

h2.widget-title {
 font-size: 3em;
}

Vielleicht ist das ein bisschen zu groß, aber es gibt dir die allgemeine Vorstellung.

Ändern der Schriftgröße in dem Stylesheet

Das Ändern der Größe von Fonts in deinem Stylesheet funktioniert ähnlich wie das Ändern eines anderen Stylings für deine Fonts.

Wenn du die Größe des gesamten Textes auf deiner Webseite ändern möchtest, würdest du das body-Element verwenden:

body {
 font-size: 14px;
}

Für das body-Element verwendest du Pixel, aber für andere Elemente verwendest du emso ist die Größe relativ zur Größe des body-Elements.

h1,
#site-title {
 font-size: 2em;
}

Denk daran, wenn du Änderungen an den Schriften in deinem Stylesheet für das Theme vornehmen möchtest, teste es zuerst auf einer Entwicklungs- oder Staging-Seite, damit du nicht das Risiko eingehst, deine Live-Seite zu ruinieren.

Wie man Schriften in WordPress optimiert

Unabhängig davon, ob du Webfonts oder lokal gehostete Fonts verwendest, ist es sinnvoll, alles zu tun, was du kannst, um deine Fonts zu optimieren.

Hier gebe ich dir einige Tipps zur Optimierung deiner Schriften, sowohl für die Geschwindigkeit als auch für das Theme.

Optimierung von Fonts für die Leistung

Wenn du Webfonts auf deiner Webseite verwendest, solltest du alles tun, was sie können, um sicherzustellen, dass sie so schnell wie möglich auf deinen Seiten bereitgestellt werden und dass die Tatsache, dass sie anderswo gehostet werden, die Dinge nicht verlangsamt.

• Verwende das Caching, um sicherzustellen, dass die Seiten nicht bei jedem Laden neu erstellt werden müssen. Kinsta Hosting-Angebote kommen mit eingebautem Caching.
• Verwende einen Webfonts-Anbieter, der Schriften über ein Content Delivery Network oder CDN bereitstellt. Google Fonts tut dies und beschleunigt die Bereitstellung der Schriften.
• Verwende nur die Schriften, die du brauchst. In der Warteschlange dürfen keine Variationen von Schriften (Gewichte, Stile) stehen, die du nicht in deinem Stylesheet verwenden wirst. Wenn du sie zu einem späteren Zeitpunkt brauchst, kannst du sie jederzeit hinzufügen.
• Wenn du Webfonts verwendest, stelle sicher, dass du sie richtig einordnest. Verwende keine @import-Zeile in deinem Stylesheet, auch wenn es das ist, was dein Webfont-Provider dir sagt.
• Wenn du CSS manuell hinzufügst, füge es zum Stylesheet deines Themes hinzu und nicht zum <head> Abschnitt deiner header.php-Datei. Dies ist ein Grund, warum es besser ist, das CSS manuell in dein Theme zu programmieren, als den Customizer oder einen Block zu verwenden, da beide das Inline-CSS zur Seite hinzufügen, anstatt es zum Stylesheet hinzuzufügen.
• Erwäge die Verwendung von CSS-Inlining, um die Ladezeiten der Seiten um einige Millisekunden zu verkürzen. Dies ist ein Prozess, der die base64-Kodierung verwendet, um CSS aus deinem Stylesheet vor dem Laden in die Seite einzufügen, so dass der Browser keine zusätzlichen Dateien laden muss. Es mag kontraintuitiv erscheinen, wenn man den obigen Ratschlag über das Schreiben von Inline-CSS nicht befolgt, aber es funktioniert immer noch aus einer separaten CSS-Datei und bedeutet nicht, dass man Inline-CSS manuell programmieren muss. Wenn du mehrere Schriften lädst, kann das Inlining deine Webseite ein wenig beschleunigen.
• Verwende die Minification, um die Größe deines Stylesheets zu reduzieren. Als Kinsta-Kunde kannst du das ganz einfach tun, indem du die Funktion zur Code-Minifizierung direkt im MyKinsta-Dashboard nutzt. Damit können Kunden mit einem einfachen Klick die automatische CSS- und JavaScript-Minifizierung aktivieren und so ihre Seiten ohne manuellen Aufwand beschleunigen.
• Wenn du Schriften lokal hosten möchtest, lade nur die Dateien für die Schriften und die von dir benötigten Schriftengewichte und -stile hoch. Füge nur die Varianten hinzu, die du brauchst, indem du die @font-face-Deklaration verwendest.
• Erwäge, ein CDN zu verwenden, um deine eigenen Fonts zu hosten, anstatt sie auf deinem eigenen Server zu hosten.
• Wenn du deine eigenen Fonts hosten möchtest, füge zusätzliche Formate hinzu: woff2, woff, ttf und eot. Browser können dann die Version auswählen, die am schnellsten geladen wird.
• Wenn du eine andere Schriftart für deinen Seitentitel verwendest, schalte nur die Zeichen ein, die du brauchst, anstatt die gesamte Schriftbibliothek.

Wenn dein Seitentitel also Kinsta ist, könntest du eine kleine Leistungssteigerung erzielen, indem du das Stylesheet wie dieses anschließt:

function kinsta_add_title_font() {
 wp_register_style( 'googleFonts', ‘https://fonts.googleapis.com/css?family=Raleway&text=“kinsta');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );

Optimierung von Schriften für das Design

Neben der Optimierung der Leistung deiner Fonts ist es auch sinnvoll, dafür zu sorgen, dass sie optisch optimiert sind: dass sie gut zum Design deiner Webseite und zu deinen Offline-Materialien passen.

Dies ist insbesondere dann der Fall, wenn du ein Plugin oder ein Child-Theme verwendest, um zusätzliche Schriften zu den bereits mit deinem Theme mitgelieferten hinzuzufügen. Es besteht die Gefahr, dass dein Design chaotisch aussieht, wenn es zu viele Schriften in zu vielen Farben und Stilen gibt.

Bevor du zusätzliche Schriften zu deiner Webseite hinzufügst, solltest du Folgendes beachten:

• Sind die neuen Schriften konsistent mit deinen bestehenden Schriften? Vermitteln sie einen ähnlichen Stil oder eine ähnliche Stimmung?
• Wenn du eine Schriftart zuordnen musst, die für Druckmaterialien verwendet wurde, aber nicht die gleiche Schriftart wie eine Webschrift verwenden kann, versuche, eine möglichst genaue Übereinstimmung in Google-Schriften zu finden.
• Sind die von dir gewählten Schriften mit deiner Marke vereinbar? Wenn du ein ernsthaftes Unternehmen führst, solltest du Comic Sans nicht verwenden (tatsächlich, egal welche Art von Webseite du betreibst, du sollst Comic Sans nicht verwenden).
• Wenn du die Farben deiner Schriften änderst, versuche, Farben zu verwenden, die bereits im Design deines Themes enthalten sind oder die mit ihnen übereinstimmen. Das Hinzufügen von zu vielen Farben wird deine Seite grell und unprofessionell aussehen lassen.
• Wenn du versuchst, ein Schriftpaar in Google Fonts auszuwählen, versuche, einen Dienst wie fontpair zu verwenden, um zwei zu finden, die gut zusammenpassen.

Die Schriften, die du in deinem Theme verwendest, haben einen Einfluss auf den Eindruck, den Besucher bekommen, wenn sie deine Webseite erreichen. Stelle sicher, dass du dies berücksichtigt und Schriften ausgewählt hast, die deine Marke stärken.

Arbeiten mit variablen Schriften

Variable Fonts sind eine neue Art von Fonts, die das Hinzufügen von mehr Fonts zu deiner Webseite effizienter machen.

Sie ermöglichen es, mehr Informationen in einer Schriftdatei zu speichern, so dass du, wenn du Variationen deiner Schriftart möchtest (fett, kursiv, etc.), nicht mehrere Schriftdateien laden musst, sondern nur die eine.

Bei einer Schrift mit mehreren Schriftarten, -stilen und -schrägen kann dies viel Speicherplatz sparen und das Einrichten der Schriftart oder das Hinzufügen über @fontface erleichtern.

Variable Schriften werden in den neuesten Versionen von Chrome, Edge, Firefox und Safari unterstützt, aber nicht von älteren Browsern; wenn du sie also verwendest, brauchst du einen Fallback. Und es gibt noch nicht viele variable Schriften. Google-Schriften enthalten keine, aber Google unterstützt die Spezifikation, so dass es wahrscheinlich ist, dass sie mit der Zeit hinzugefügt werden.

Schriftenentwickler arbeiten daran, mehr variable Schriften zu erstellen und ihre Zuverlässigkeit zu verbessern, so dass es sich lohnt, den Fortschritt zu beobachten, damit du variable Schriften verwenden kannst, um deine Schriften zu optimieren, sobald sie stabiler werden.

Zusammenfassung

Das Ändern von Fonts auf deiner WordPress-Seite ist keine einfache Aufgabe. Du hast verschiedene Möglichkeiten zur Auswahl:

1. Verwendung von Webfonts durch Installation eines Plugins.
2. Verwende Webfonts, indem du sie in dein Theme programmierst und in eine Reihe stellst.
3. Hosting deiner Schriften.

Dann solltest du dich darauf konzentrieren, wie du deine Schriften für eine bessere Leistung optimieren kannst. Wenn du den Tipps in diesem Handbuch folgst, solltest du nicht nur Fonts in WordPress ändern können, sondern auch mehr Kontrolle über sie in deinem Theme haben.