WordPress Schrift ändern – Möglichkeiten im Überblick

Schriftart in WordPress ändern – so geht’s

Variante 1: Über die Einstellungen Ihres Themes

Viele Themes weisen integrierte Optionen zur Anpassung der Schriftart an. Die Einrichtung der Font kann sich von Theme zu Theme jedoch unterscheiden. Prinzipiell ist die Vorgehensweise aber dieselbe. Sobald Sie in der Administrationsoberfläche Ihres WordPress-Hostings angemeldet sind, navigieren Sie zu „Design“ und wählen anschließend „anpassen“ aus. Über den Customizer gelangen Sie zu den Einstellungen des aktiven Themes. Hier müssen Sie nach dem Konfigurationspunkt suchen, welcher es Ihnen ermöglicht, den Font anzupassen. In der Regel nennt sich dieser Punkt Typografie. Die Optionen des Customizers können ja nach Theme unterschiedlich ausfallen, umfassen in der Regel aber weitere Einstellungen rund um die Einrichtung der Schriftart.

• Die Schriftgröße kann für verschiedene Textelemente und Menüpunkte angepasst werden.
• Die Schriftstärke lässt sich von dünn bis fett ebenfalls flexibel anpassen.
• Die Schriftfarbe kann wie die Größe für unterschiedliche Textelemente eingestellt werden.

Variante 2: Über Global Styles

Global Styles ermöglicht die Anpassung der gesamten Domain über ein Tool. Voraussetzung ist die Nutzung eines Block-Themes und WordPress 5.9 oder höher. Um auf Global Styles zuzugreifen, melden Sie sich wie gewohnt in Ihrem Dashboard an. Anschließend navigieren Sie zu „Design“ und wählen „Editor“ aus. Klicken Sie in der oberen Navigationsleiste auf das Symbol für Global Styles (ein zur Hälfte gefüllter Kreis). Hier können Sie – ähnlich wie im Customizer – umfassende Veränderungen an der Font vornehmen. Neben Einstellung von Schriftart, Schriftgröße, Schriftfarbe und Schriftstärke kann auch das Farbschema und Layout der Website festgelegt werden.

Veränderungen, die Sie in den Global Styles vornehmen, werden sofort in der Vorschau angezeigt. Um zum Standarddesign zurückzukehren, können Sie im Menü oben rechts jederzeit die Option Auf Standardeinstellungen zurücksetzen auswählen.

WordPress Fonts über CSS ändern

Über die Stylesheet-Sprache CSS lässt sich das Erscheinungsbild von HTML-Dokumenten unabhängig vom gewählten Theme definieren. Die WordPress Schrift über CSS zu ändern, bietet somit ein hohes Maß an Flexibilität und Kontrolle über die Gestaltung der Schrift bzw. das gesamte Design. Darüber hinaus stehen Ihnen hier eine größere Auswahl an Schriftarten zur Verfügung.

Die Anwendung von CSS ist auch aus datenschutzrechtlichen Gründen zu empfehlen. Die Nutzung von Schriften direkt von externen Quellen (also von anderen Servern aus Ihrem Webhosting-Paket, z. B. den Google-Servern) birgt nach aktuellen Gerichtsurteilen ein Datenschutz-Risiko. Wir raten Ihnen dazu, Schriften stets lokal einzubinden, sprich herunterzuladen und in Ihrem Webspace abzulegen.

Vorbereitung der Schriftdateien

Wenn Sie in WordPress eine Schriftart hinzufügen möchten, die nicht in der Standard-Installation von WordPress enthalten ist, müssen Sie die Schriftdateien von einem externen Anbieter herunterladen. Google Fonts bietet beispielsweise eine große Auswahl an Schriftarten, die als ZIP-Archiv heruntergeladen werden können. Nach dem Download müssen Sie das Archiv entpacken und die Schriftdateien auf Ihr Webhosting hochladen. Hierfür stehen Ihnen üblicherweise zwei Möglichkeiten zur Verfügung: SSH und FTP. Beachten Sie, dass Sie bei der Verwendung von FTP das Archiv vor dem Upload entpacken müssen, da ein nachträgliches Entpacken per FTP nicht möglich ist.

Sobald Sie die Font-Dateien vorbereitet haben und mit dem Server verbunden sind, empfehlen wir, einen neuen Ordner mit dem Namen „fonts“ direkt im Root-Ordner Ihrer WordPress anzulegen.

/home/sites/site100000xxx/web/WordPress-Ordner/fonts

Achtung: Sollten Sie hier einen anderen Pfad oder Ordnernamen wählen, müssen Sie später den CSS-Code anpassen.

Schriftarten über CSS einbinden

Um die lokal gespeicherten Schriftarten in WordPress zu verwenden, müssen Sie sie über CSS einbinden. Hierfür eignet sich die Option Zusätzliches CSS in den Theme-Einstellungen (Customizer). Klicken Sie auf diesen Punkt, um ein Eingabefeld für den CSS-Code zu öffnen.

@font-face {
	font-family: '$IhrFont';
	font-style: normal;
	src: url('https://IhreDomain.de/fonts/$IhrFont.eot');
	src: local(''),
		url('https://IhreDomain.de/fonts/$IhrFont.eot?#iefix') format('embedded-opentype'),
		url('https://IhreDomain.de/fonts/$IhrFont.woff2') format('woff2'),
		url('https://IhreDomain.de/fonts/$IhrFont.woff') format('woff'),
		url('https://IhreDomain.de/fonts/$IhrFont.ttf') format('truetype'),
		url('https://IhreDomain.de/fonts/$IhrFont.svg#MouseMemoirs') format('svg');
	}

Mit dem oben genannten Code binden Sie die Fonts in Ihre WordPress ein. Um nun den Font auch für Ihren Text zu aktiveren, müssen Sie folgenden Code verwenden:

{ font-family:"$IhrFont"; }

Hier gibt es jedoch auch diverse andere Konfigurationsmöglichkeiten.

Anpassung der Schriftgröße

Um die WordPress Schriftgröße zu ändern, empfehlen wir wie bereits bei den Fonts die Option Zusätzliches CSS. Hier können Sie mit der Anweisung „font-size“ die Größe der Fonts definieren.

Anpassung der Header:

h1, h2 ,h3, h... { font-size: 20px; }

Anpassung der Texte:

p { font-size: 20x; }

Anpassung der vollständigen Seite:

* { font-size: 20x; }

Anpassung der Schriftfarbe

Auch die WordPress Schriftfarbe zu ändern ist mit den Optionen der Cascading Stylesheets kein Problem. Hierzu müssen Sie die bereits bekannte „font-size“-Anweisung zu „color“ ändern und den Hex Code der gewünschten Farbe angeben.

Anpassung der Header:

h1, h2 ,h3, h... { color: #3f84dd; }

Anpassung der Texte:

p { color: #3f84dd; }

Anpassung der vollständigen Seite:

* { color: #3f84dd; }