WordPress Schriften – finden, verändern & integrieren

Beitragsgrafik zum Thema: WordPress Schriften finden und anpassen
JohannaVon Johanna|12. Dezember 2023

So kannst du deine Schrift anpassen

Als eine Bekannte erzählte, dass sie nicht wusste, wie sie die Schrift ihrer WordPress Webseite verändern kann, begannen unsere Recherchen zu dem Thema. Denn insbesondere für Einsteiger sind verschiedene Einstellungen bei WordPress noch etwas unverständlich bzw. einfach schwer zu finden und ehrlich gesagt, ist die Einstellung der Schriftart bei jedem WordPress ein bisschen anders.

 

Denn der Ort, an dem du die WordPress Schrift verändern kannst, ist von verschiedenen Faktoren und von der Art der Integration abhängig.

 

Wir haben uns deshalb die verschiedenen Möglichkeiten einmal angeschaut, um herauszufinden, wo du bei deinem WordPress deine Schriftart finden, verändern und ganz neu integrieren kannst.

1. Welche Schriftart ist die Richtige?

Die richtige Schriftart für deine Webseite zu finden, ist nicht immer leicht. Denn es gibt eine Vielzahl von verschiedenen Schriftarten, ob mit oder ohne Serifen, die du für deine Seite verwenden kannst. Aber nicht jede Schriftart ist gleich gut geeignet und für alle Benutzer gut zu lesen, insbesondere für Menschen mit Behinderungen können Serifen Schriftarten schwierig zu lesen sein.

 

Was ist eine Serifen-Schriftart?

Eine Serifen-Schriftart ist eine Schrift, die durch kleine Linien oder Striche am Ende der Buchstaben gekennzeichnet ist. Diese Linien werden als Serifen bezeichnet. Im Gegensatz dazu stehen die sog. „Sans-Serif“-Schriften, die keine solchen Verzierungen aufweisen.

 

Serifen-Schriftarten sind besonders bei gedruckten Texten, wie Zeitungen, Magazinen oder Büchern beliebt, da sie dort die Lesbarkeit erhöhen können. Serifen leiten das Auge entlang der Zeile und helfen, die Buchstaben und Wörter visuell miteinander zu verbinden.

Serifen-Schriften stehen dabei oft für Eleganz und traditionelle Ausstrahlung. Besonders in der digitalen Welt finden diese allerdings immer weniger Anwendung, da sie auf kleineren Bildschirmen schwer zu lesen sind.

 

Bei der Auswahl der richtigen Schriftart gibt es verschiedene Punkte zu beachten:

  • Lesbarkeit – Wähle eine Schriftart, die leicht zu lesen ist. Diese beinhaltet klare, definierte Buchstaben und einen ausreichenden Zeichenabstand. Verzichte hier lieber auf Serifen-Schriftarten.
  • Sichtbarkeit – Achte darauf, dass die Schriftarten auch auf kleineren Bildschirmen wie Smartphones und Tablets gut sichtbar und lesbar sind.
  • Ladezeiten – Einige Schriftarten können die Ladezeit deiner Webseite verlangsamen, wenn sie von externen Quellen wie Google Fonts geladen werden. Wähle daher eine Schriftart, die eine gute Balance zwischen Ästhetik und Performance anbietet.
  • Kompatibilität – Stelle sicher, dass die Schriftarten auf verschiedenen Browsern und Betriebssystemen gut funktionieren. Denn nicht jede Schrift kann von jedem Browser geladen werden und wird in diesem Fall durch eine andere Schriftart ersetzt.
  • Barrierefreiheit – Wähle eine Schriftart, die barrierefrei ist und auch für Personen mit Sehbehinderungen gut lesbar ist.

 

Empfohlene Schriftarten für Webseiten

Nicht jede Schriftart ist für eine Webseite geeignet. Hier findest du deshalb ein paar Beispiele für Schriften, die du barrierefrei und bedenkenlos auf deiner Webseite verwenden kannst:

 

Roboto ist eine moderne, sans-serif Schriftart, die für ihre Klarheit und Lesbarkeit auf verschiedenen Bildschirmgrößen bekannt ist.

Open Sans ist die klassische Schriftart, die für ihre Lesbarkeit und Neutralität beliebt ist und die sich gut für Textkörper und Überschriften eignet.

Montserrat – besonders stilvoll und modern. Sie wird oft für Überschriften und Textkörper verwendet und ist gut lesbar.

Lato strahlt eine gewisse Wärme und Freundlichkeit aus und ist daher eine beliebte Schriftart für Webseiten, die einen einladenden Ton anstreben.

Arial und Helvetica – Obwohl sie eher traditionell sind, bleiben diese Sans-Serif-Schriftarten wegen ihrer universellen Lesbarkeit und Kompatibilität stets beliebt.

2. Achtung bei der Verwendung von Google Fonts

Im Jahr 2022 gab es eine große Abmahnwelle, bzgl. der widerrechtlichen Einbindung der Google Fonts, also der Google Schriftarten.

 

Aber was sind Google Fonts eigentlich nochmal?

Google Fonts bezeichnen eine umfassende Sammlung von Schriftarten, die von Google zur freien Verfügung gestellt werden. Darin befinden sich ca. 1400 Schriftarten, unter denen viele keine Software-Lizenz zur Verwendung benötigen und die du ganz einfach bei Google herunterladen kannst.

 

Was war das Problem mit der Einbindung der Google Fonts?

Durch die lizenzfreie Verwendung der Google Fonts kann jeder Webseitenbetreiber diese Schriftarten verwenden, ohne diese auf den eigenen Servern hochladen zu müssen. Das macht eine Verwendung der Google Fonts also sehr einfach. Lädst du die Schriftarten von Google allerdings nicht auf deine eigenen Server oder Datenbanken, sondern du verwendest sozusagen die Server von Google, werden die Daten deiner Webseitenbesucher an Google weitergeleitet – und genau hier liegt das Datenschutzproblem mit der DSGVO.

Google streitet zwar bisher ab, dass aufgrund der Verwendung von Google Fonts Daten der Nutzer gespeichert und weitergeleitet werden, rechtlich gesehen sind die Server von Google allerdings in einer Grauzone. Denn die DSGVO besagt, dass personenbezogene Daten nicht an US-Staaten weitergeleitet werden dürfen, wo sich jedoch die Serverstandorte von Google befinden.

 

👉 Mehr Informationen über die Problematik von Google Fonts und das Interview mit Rechtsanwalt Marcus Dury zum Thema DSGVO und Datenschutz bei US-Anbietern.

 

Wie kann ich Google Fonts rechtssicher verwenden?

Zunächst ist es wichtig, einmal zu überprüfen, ob du auf deiner Webseite überhaupt Google Fonts Schriftarten verwendest und wenn ja, wie diese auf deiner Webseite geladen werden. Deine Webseite kannst du hier über dieses Tool auf die Verwendung von Google Fonts überprüfen lassen.

 

Um das Weiterleiten von personenbezogenen Daten an Google zu verhindern, solltest du die Google Fonts lokal auf deinem Server einbinden, sodass diese nicht über die Server von Google geladen und abgerufen werden. Hierzu kannst du am aller einfachsten das Plugin OMGF verwenden oder die Schriftart von einem Entwickler in dein WordPress einbauen lassen.

Das Plugin OMGF

Das Plugin OMGF ist eigens darauf spezialisiert, deine Webseite auf die Verwendung der Google Fonts zu überprüfen, diese zu erkennen und auf deiner Seite zu integrieren. Tatsächlich ist die Lösung wirklich so einfach und nach dem Installieren und Aktivieren des Plugins kannst du wie folgt vorgehen:

  • Begib dich in die Einstellungen von OMGF
  • Klicke hier auf „Starte die Optimierung“
  • Aktiviere das Vorladen der Google Fonts
  • Schon geschafft!

3. Schriftarten verändern

I. Schriftarten verändern über WordPress.com

Je nachdem, was du auf deinem WordPress an Theme oder PageBuilder installiert hast, findest du die passende Einstellung woanders. Liegt deine WordPress Webseite bei dem Hoster WordPress.com, kannst du die Schriften ganz einfach im Webseiten-Editor verwenden.

 


‼️ Wichtig zu wissen

Da jede WordPress Installation anders ist, muss nicht jede dieser Einstellungs-Optionen bei dir funktionieren. Unsere Empfehlung ist daher, dich einmal durch die verschiedenen Möglichkeiten zu klicken, bis du die passende Einstellungs-Option in deinem WordPress gefunden hast.


Über die drei Punkte, kannst du deine Schriften bei WordPress.com über Globale Stile ändern.
Ändere die Schriftart deiner Webseite über die Einstellung "Globale Stile".

So gehst du vor:

  • Begib dich in dein WordPress Backend.
  • Klicke auf eine Seite/ Beitrag, die du mit dem WordPress Editor bzw. Gutenberg bearbeitest.
  • Klicke nun oben rechts auf die drei Punkte, um das Menü zu öffnen.
  • Klicke hier auf Globale Stile – die Datenbank deiner Schriftarten.
  • Hier kannst du meist verschiedene Einstellungen treffen bzgl. der Schriftart von Überschriften, Basis Schriftart, Schriftgrößen uvm.
  • Wähle eine neue Schriftart und passe sie in ihren Optionen an.
  • Klicke auf Veröffentlichen, um alle Einstellungen für die gesamte Webseite zu übernehmen.

II. Schriftarten über das aktive Theme bearbeiten

Eine ebenfalls einfache Möglichkeit deine Schriftart bei WordPress zu verändern, ist dies über dein Theme zu tun. Diese Option ist allerdings stark von dem verwendeten Theme abhängig und nicht jedes Theme bietet diese Funktion an. Daher musst du hier für dich schauen, ob diese Möglichkeit in deinem Theme gegeben ist.

 

So kannst du die Schrift ändern:

  • Begib dich in dein WordPress Dashboard.
  • Klicke in der linken Menü-Leiste auf Design und dann auf Customizer.
  • Hierüber gelangst du in den Theme Customizer, über den du allgemeine Einstellungen deines Themes aktualisieren kannst.
  • Klicke hier auf den Bereich Typografie.
  • Hier kannst du nun ebenfalls aus verschiedenen Schriften wählen, Schriftarten für Überschriften und Basistexte anpassen etc.
  • Klicke auch hier auf Veröffentlichen, um die Einstellungen für die gesamte Webseite zu übernehmen.

 

👉 Sollte es diese Option bei dir nicht geben – was vorkommen kann – schaue bitte nach, ob eine der anderen Optionen möglich ist.

III. Schriftarten bei Elementor verändern

Auch bei der Verwendung von Elementor als PageBuilder oder Theme kannst du deine Schriftart wirklich einfach und schnell verändern – ohne großen Aufwand betreiben zu müssen.

 

So kannst du die Schriftart anpassen:

  • Begib dich in einen Beitrag/ eine Seite, die du mit Elementor bearbeiten kannst.
  • Klicke links oben auf das Burger-Menü. Burgermenü bei Elementor
  • Klicke anschließend auf Webseiten-Einstellungen.
  • und danach auf  .
  • Hier findest du nun Einstellungen zu Primär-Schriften, Sekundär-Schriften, Text-Schriften und Accent.
  • Mit einem Klick auf den kleinen Stift gelangst du in das jeweilige Bearbeitungs-Menü.
  • Du kannst hier ganz verschiedene Einstellungen vornehmen. Wenn du alle Schriften neu ausgewählt und eingestellt hast, klicke ganz unten auf Aktualisieren.

 


💡 TIPP

Bei den Webseiten-Einstellungen hier bei Elementor findest du ebenfalls den Punkt Typografie, unter dem du die Überschriften mit Farben, Schriftfamilien, Stile uvm. festlegen kannst.



! Kostenloser Speedtest (CTA-Box) - 04/22 - /blog/

Wie schnell ist deine WordPress Seite?

Teste jetzt kostenlos die Ladezeit deiner Webseite!

✔ Du bekommst das Testergebnis direkt per E-Mail.

Mit dem Absenden dieses Formulars stimmst du unseren Datenschutzbestimmungen zu.


4. Schriftarten bei WordPress integrieren

Manchmal musst du die Dinge eben selbst in die Hand nehmen und eine Schriftart auswählen, die dir wirklich gefällt. Deswegen hast du verschiedene Optionen, Schriftarten zu kaufen und lokal auf deine WordPress Server zu integrieren.

Die Schriftarten kannst du entweder

  • bei Google Fonts herunterladen
  • über ein Plugin einbinden
  • oder diese über CSS einfügen

 


‼️ Hinweis

Die Einbindung von Schriftarten über CSS ist für Anfänger sehr komplex, weswegen wir hierzu keine Anleitung geben möchten, da hier viele Fehler passieren können. Selbst bei kleineren Fehlern in der Code-Struktur kann deine Webseite falsch dargestellt werden oder Probleme verursachen. Deshalb empfehlen wir die Integration neuer Schriftarten über das CSS nur von kundigen Personen oder Entwicklern vornehmen zu lassen.


I. Google Fonts auswählen und herunterladen

Was die Google Fonts sind und wie genau die rechtliche Problematik aussieht, konntest du bereits weiter oben im Beitrag lesen. Wir zeigen dir jetzt hier, wie du Google Fonts herunterladen und integrieren kannst.

 

Die Google Fonts findest du, wie der Name es bereits sagt, bei Google – genauer gesagt hier. Du erhältst hier insgesamt fast 1600 verschiedene Schriftarten, durch die du dich einfach mal durchklicken kannst. Dazu gehören unter anderem bekannte Schriftarten wie Roboto, Open Sans, Lato, Playfair Display, PT Serif und viele, viele mehr.

 

👉 Wenn du nach einer spezifischen Schrift suchst, den Namen aber nicht kennst, versuche diese über einen Filter zu finden.

 

Wenn du die Schrift deiner Wahl bereits kennst oder sie gefunden hast, kannst du einfach auf die Schrift klicken, um in die jeweilige Übersicht zu gelangen.

Google Fonts Schriftarten Beispiel mit Playfair Display
Die Schriftart Playfair Display als Beispiel bei Google Fonts.

Hier hast du die Möglichkeit, dir die verschiedenen Schriftbilder der Schriftfamilie – hier am Beispiel Playfair Display – genau anzuschauen und zu testen, ob dir die Schrift wirklich zusagt und wie das Schriftbild aussieht. Du kannst kurze Texte schreiben, die Schriftgröße anpassen, verschiedene Schriftstile testen uvm.

 

Gefällt dir die Schriftart, kannst du sie über den „Download Family“-Button herunterladen. Du erhältst eine zip-Datei, die du mit einem Klick öffnen kannst. In diesem Ordner befinden sich nun die Hauptschrift und alle ihre Abwandlungen, also die verschiedenen Schriftfamilien.

 


‼️ Gut zu wissen

Es gibt natürlich neben den Google Fonts auch andere Schriftarten-Verzeichnisse, über die du eine Schriftart erhalten kannst. Wichtig ist hierbei, auf die entsprechende Endung der Dateien zu achten. Diese müssen die Endungen .ttf, .otf oder .woff haben, damit du sie später bei deiner Webseite integrieren kannst.


 

Neben dem Herunterladen ganzer Schriftfamilien, hast du bei Google Fonts auch die Möglichkeit, nur einzelne Schriftstile herunterzuladen. Dazu klickst du hinter dem gewünschten Schriftstil auf das kleine Plus-Symbol, um diese in den Warenkorb hinzuzufügen. Die Auswahl deiner Schrifttypen kannst du oben rechts im Warenkorb entweder gesammelt herunterladen oder den jeweiligen Code kopieren. Den Code kannst du dann später in die HTML-Datei von deinem WordPress einfügen.

 

Nachdem du deine neue Schriftart heruntergeladen hast, geht es um die richtige lokale Integration der Schrift auf deiner Webseite. Wie das geht, zeigen wir dir im nächsten Schritt.


💡 TIPP

Zur Optimierung deiner Webseiten-Performance solltest du nur die Schriftarten bei WordPress hinterlegen, die du auch wirklich verwendest. Je mehr Schriftarten und Schrifttypen du hinzufügst, desto langsamer wird deine Webseite. Solltest du mal eine weitere Schriftart benötigen, lohnt es sich also mehr, diese nachträglich hinzuzufügen.


II. Schriftarten über ein Plugin integrieren

Am einfachsten ist es, deine neue Schriftart über ein Plugin auf deiner Webseite und deinen Servern zu integrieren. Bei über 60.000 Plugins ist die Auswahl dazu bei WordPress natürlich riesig. Ein beliebtes WordPress Plugin für die Integration von Schriften ist daher Use Any Font by DnessCarkey.

Das Plugin Use any Font, um Schriftarten bei WordPress hinzuzufügen.

Das Plugin Use Any Font hat mehr als 200.000 aktive Installationen bei WordPress und wird in sehr regelmäßigen Abständen aktualisiert. Das Plugin ist leider vollständig auf Englisch, dafür aber mit allen gängigen PageBuildern kompatibel. Viele Rezensionen von Usern besagen, dass sie das Plugin bereits seit vielen Jahren verwenden und es bisher immer einwandfrei funktioniert hat. Das Besondere daran, du bezahlst das Plugin nur einmal und erhältst eine Lifetime Lizenz. Je nachdem, welches Ziel du verfolgst, lohnt sich hier sogar der Tarif für eine unlimitierte Webseitenanzahl für einmalig 49,99 $.

 

Vorteile

  • einfache Integration von Schriftarten bei WordPress
  • kompatibel mit allen Browsern
  • kompatibel mit allen Themes
  • kompatibel mit allen gängigen PageBuildern
  • Verwendung verschiedener Schriften möglich
  • Unterstützung von WPML Plugin
  • Upload Größe bis zu 25 MB

 

Preis: kostenlos bei WordPress und einmalig ab 9,99 $ 

Die Einrichtung des Plugins

  • Installiere und aktiviere das Plugin Use Any Font in deinem WordPress.
  • Gehe in deinem WordPress Dashboard Menü auf die Einstellungen von Use Any Font.
  • Hier musst du nun einen API-Schlüssel eingeben. Bei der gekauften Version hast du diesen bereits erhalten. Verwendest du die kostenlose Version des Plugins, kannst du dir hier direkt über den Button einen API-Schlüssel erstellen lassen. Dieser ist nötig, um deinen Server mit dem Plugin zu verbinden, um so die Schriftarten in deinem WordPress konvertieren zu können.

  • Jetzt kannst du deine Schriftart als Datei im Plugin hochladen – achte aber auf die richtige Endung der Datei (.ttf, .otf, .woff).
  • Füge einen Titel für deine Schrift ein und klicke auf Upload.
  • Nachdem deine Schriftart jetzt hochgeladen ist, klicke oben im Menü auf Assign Font, um deine Schriftart anzeigen zu lassen.


💡TIPP

Wenn du keine Schrift hochladen möchtest, kannst du hier auch aus vordefinierten Schriftarten wählen. Klicke hierzu auf Add Predefinded Fonts (neben dem Upload Button) und wähle eine Schriftart aus.


  • Klicke nun ganz rechts nochmal auf den blauen Button Assign Font (s. im folgenden Bild Schritt Nr. 1).
  • Es öffnet sich hier ein Menü, über welches du deine gerade hochgeladene Schriftart auswählen kannst (s. folgendes Bild Schritt Nr. 2).
  • Im Menü kannst du im Bereich Select elements to assign auswählen, wo du die Schrift auf deiner Webseite einsetzen möchtest. Zum Beispiel für Überschriften, Seitentitel oder Zitate.
  • Wenn du hier alles fertig eingestellt hast, klicke unten auf den blauen Button Assign Font zum Speichern deiner Einstellungen – ja, den blauen Button gibt es hier sehr oft.

 

Schon hast du eine neue Schriftart nach deinen Wünschen auf deiner Webseite installiert.

Assign Font, um Schriftarten im Plugin hochzuladen und den Bereichen zuzuordnen.

‼️ Gut zu wissen

Überlege dir gut, wo du die Schrift anwenden möchtest, denn die hier getroffenen Einstellungen kannst du nicht mehr verändern oder bearbeiten. Wenn du die Einstellungen nochmal anpassen möchtest, musst du die Schrift bzw. Assign Font nochmal löschen und erneut bearbeiten.


5. Fazit

Deine WordPress Schrift zu verändern bzw. ein neues Google Font zu deinem WordPress hinzuzufügen ist gar nicht schwer. Wir haben dir hier verschiedene Möglichkeiten gezeigt, wie du eine bereits bestehende Schriftart verändern kannst oder eine gänzlich neue benutzen kannst.

 

Natürlich ist es auch möglich, eine Schriftart über CSS bei WordPress zu integrieren. Allerdings ist das für WordPress Einsteiger sehr kompliziert. Deswegen bitten wir dich darum, einen erfahrenen Entwickler zur Hilfe zu holen, wenn du deine Schriftart über CSS in deine Webseite einbinden möchtest. Denn für erfahrene WordPress User sollte das kein Problem sein.

 

Wie hast du deine Schriften auf deiner Webseite eingebunden? Gib uns gerne hier dein Feedback dazu und hilf damit auch den anderen.