So kannst du deine Schrift anpassen
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.
💡 Schon gewusst?
In unserem Podcast „Hör mal wer da Hosted“ sprechen wir mit Oliver Schöndorfer über das Thema Typografie.
Oliver, Nick und Adrian sprechen in dieser Podcastfolge über die oft unterschätzte Bedeutung von Schriftarten in Open-Source-Projekten und geben praxisnahe Tipps, wie du die perfekte Typografie für dein Projekt auswählst. Erfahre, warum eine gut gewählte Schriftart mehr als nur Ästhetik ist – sie ist ein kraftvolles Werkzeug, um deine Botschaft effektiv zu kommunizieren.
1. Welche Schriftart ist die Richtige?
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.
- 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
‼️ 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.
- 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
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
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ü.
- 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.
.
gelangst du in das jeweilige Bearbeitungs-Menü.💡 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.
4. Schriftarten bei WordPress 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
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.
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
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 $
- 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.
‼️ 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
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.
