WordPress Schriftart: In diesem kurzen Artikel entdeckst Du, wie Du ziemlich einfach Deine WordPress Schriftarten ändern kannst. Ganz egal ob mit oder ohne Plugin.
Doch nicht nur das erwartet Dich: Du bekommst auch wichtige Begriffe erklärt, die Du kennen musst. Zudem erwarten Dich clevere Schriftart-Empfehlungen, sowie ein Trick, dank dem Du Schriftarten von fremden Websites herausfinden kannst…
Zusammengefasst: Du bekommst alles rund um WordPress & Schriftarten in diesem kompakten Artikel von A-Z gezeigt. So dass Du alles wichtige weißt und umsetzen kannst.
Lass uns direkt starten…
Inhaltsverzeichnis
- Webfonts, Websafe Fonts, Lokal gehostete Schriften
- WordPress Schriftart ändern / hinzufügen
- WordPress Schriftart herausfinden
- Fazit
- FAQ – Häufig gestellte Fragen
1. Webfonts, Websafe Fonts, Lokal gehostete Schriften
Bevor es so richtig losgeht, sollten wir zuerst einige Begriffe & Grundlagen klären, damit es KEINE Unklarheiten gibt.
Technisch gesehen ist es möglich jede beliebige Schriftart auf deiner Website einzubauen. Wenn ein Besucher deine Website benutzt, dann lädt sein Browser eine Schrift, die auf seinem Computer gespeichert ist. Sollte die von dir für deine Website ausgewählte Schrift nicht vorhanden sein, dann wird eine Ersatzschrift geladen. Diese wird möglicherweise nicht sehr schön anzusehen sein.
Websafe Fonts
Mac und Windows haben allerdings unterschiedliche Schriften zur Auswahl. Deshalb ist es empfehlenswert eine Schriftart zu nutzen, welche auf so gut wie jedem Endgerät vorhanden ist. Diese Schriftarten werden Websafe Fonts genannt. Von diesen universalen Schriften sind die geläufigsten die folgenden 12 Stück:
- Arial
- Palpatino Linotype
- Comic Sans MS
- Impact
- Lucida Sans Unicode
- Tahoma
- Trebuchet MS
- Lucida Console
- Courier New
- Georgia
- Times New Roman
- Verdana
Diese Schriftarten werden in nahezu jedem Browser richtig angezeigt.
Webfonts
Die sogenannten Webfonts sind ebenfalls websafe. Webfonts sind Schriften im Web Open Font Format, welche auf HTML basieren und von deinem Webbrowser schriftstilnah angezeigt werden. Der Unterschied zu normalen Computerschriften besteht darin, dass ein Webfont nicht aus der Schriftensammlung deines lokalen Computers, sondern aus einem externen Webserver (z.B. aus der Google Fonts Datenbank) in deinen Browser geladen wird.
Bei der Verwendung von Webfonts musst du aufpassen, dass du eine Schrift nicht illegalerweise benutzt. Denn es gibt kosten- und nutzungsfreie Fonts, aber auch kosten- und lizenzpflichtige.
Lokal gehostete Schriften
Die Nutzung von Webfonts kann die Ladegeschwindigkeit deiner Website reduzieren, da diese von einem externen Server geladen werden müssen. Um dies zu verhindern ist es möglich die Fonts lokal über CSS zu hosten. Jedoch wird durch lokales Hosten nicht automatisch die Geschwindigkeit deiner Website erhöht, sondern sie kann sogar verlangsamt werden. Deshalb ist es empfehlenswert ein CDN (Content Delivery Network) zu nutzen, damit dies verhindert werden kann.
2. WordPress Schriftart ändern / hinzufügen
2.1 Über das Theme
Deine WordPress Schriftart zu ändern geht häufig ganz einfach über die Design-Optionen deiner Website.
Dazu gehst du im WordPress-Seitenmenü auf Design > Customizer. Dort kannst du im Regelfall unter Typografie (kann je nach Theme auch anders heißen) die Schriftarten für den Body, die Überschriften und die Menüs festlegen. Dabei bist du auf die Auswahl begrenzt welche WordPress dir anbietet.
Im Customizer gibt es ganz unten noch den Punkt Custom CSS/JS, da kannst du selbst Code einfügen, um deine Schriftart beliebig anzupassen.
Wichtiger Hinweis: Je nach Theme, dass Du verwendest, findest Du im Customizer NICHT diese Option, um die Schriftart zu ändern. Die meisten Themes aus der WordPress Theme Bibliothek haben jedoch diese Funktion.
2.2 OHNE Plugin: style.css-Datei
Eine Möglichkeit deine WordPress Schriftart ohne Plugin zu ändern, bietet dir die style.css-Datei. Diese kannst du entweder per FTP (z.B. FileZilla) oder über den Theme-Editor erreichen.
Hinweis: Bevor Du Änderungen an der style.css-Datei vornimmst, empfehlen wir Dir aber unbedingt ein BackUp Deiner Website zu machen – zur Sicherheit.
Zu deinen Theme-Dateien gelangst du über Design > Theme-Editor. Dort kannst du rechts deine style.css-Datei auswählen. Um nun die Schrift zu ändern musst du erst eine neue Schriftart zu deiner Website hinzufügen:
- Von z.B. Google Fonts kannst du deine gewünschte Schrift herunterladen.
- Du erstellt per FTP in deinem Webspace das Verzeichnis /fonts und kopierst die Datei der Schrift dort hinein.
- Beim Einbinden der neuen Schrift per CSS in die style.css-Datei hilft dir das dafür notwendige CSS-Snippet des Google-Webfonts-Helper. Bei zukünftigen Aktualisierungen deines Themes werden diese Änderungen jedoch wieder überschrieben, weshalb es sinnvoll ist ein Child-Theme anzulegen und die Änderungen an der style.css-Datei dort vorzunehmen.
- Wenn das Ganze möglichst DSGVO konform sein sollt, dann musst du anschließend noch mithilfe eines Plugins die Verbindung der Schrift zum Google Server trennen.
Nachdem du die neue Schriftart oder mehrere neue Schriftarten deiner Website hinzugefügt hast, kannst du in der style.css-Datei außerdem noch die Schriftarten für Überschriften und Fließtext bestimmen oder die Schriftgröße und -farbe ändern.
2.3 Schriftarten in Elementor ändern
Solltest du Elementor als Page Builder nutzen, dann kannst du die Schriftarten unter Elementor > Eigene Schriften ändern. Dazu benötigst du jedoch die Pro-Version.
Des weiteren kannst du die Schriftarten anpassen, während du einen Beitrag mit Elementor bearbeitest. Heißt: Du kannst festlegen, welche Schriftarten eine neue Elementor Seite / Beitrag standardmäßig hat.
Dazu gehst du im Elementor Panel auf das Hamburger-Menü > Site Settings. Dort kannst du nun unter Globale Schriftart deine Wunschschrift auswählen und unter Typografie entscheiden für welche Überschriften und Fließtexte welche Schriftart gilt.
d. Schriftarten in Thrive Architect ändern
Um mit Thrive Architect individuelle Schriftarten zu nutzen wurde von Thrive eine Integration des Plugins Custom Fonts ermöglicht.
Dieses Plugin ermöglicht dir in deinem WordPress-Dashboard individuelle Schrift-Dateien hochzuladen. Wenn du anschließend einen Textabschnitt im Thrive Architect bearbeitest werden dir die verfügbaren Schriftarten angezeigt.
Dazu wählst du das Custom Fonts Plugin als Quelle aus und dann kannst du aus den von dir hochgeladenen Schriftarten die Passende auswählen.
e. Easy Google Fonts Plugin
Das Plugin Easy Google Fonts ist wirklich einfach nutzbar. Es erlaubt dir den Zugriff auf 600+ Google Fonts. Das Plugin wird nach der Installation und Aktivierung automatisch in den WordPress-Customizer integriert, so dass die Google Fonts dort unter Typografie (das obere Typografie) verfügbar sind und du die Änderungen in Echtzeit sehen kannst.
Mit Easy Google Fonts kannst du die Schriftarten für Text-Absätze und Überschriften bearbeiten, aber nicht die Schriftgröße und -farbe ändern, wie Du im Folgenden siehst.
Dieses Plugin ist mit jedem WordPress-Theme kompatibel und ermöglicht dir unter Einstellungen > Google-Schriftarten individuelle Schriftart-Regeln einzurichten. Diese Schriftart-Regeln dienen dazu CSS-Selektoren zu steuern, d.h. du kannst z.B. bestimmen für welche Überschriftenart welche Schriftart verwendet werden soll.
f. Fonts Plugin
Das Fonts Plugin wird ebenfalls in den WordPress-Customizer integriert und ist wirklich sehr intuitiv nutzbar. Es erlaubt dir 1000+ verschiedene Schriftarten von Google Fonts für Überschriften, Fließtext, Buttons etc. auszuwählen und die Änderungen in Echtzeit zu begutachten – Um am Ende die passende Schriftart zu nutzen.
Wenn du dir das Fonts Plugin Pro holst, dann erhältst du einige zusätzliche Funktionen:
- Schriftgröße und -farbe anpassen
- Schriftarten lokal hosten
- optimiertes Laden der Schriften
- die Möglichkeit individuelle Schriftarten hochzuladen
g. Use Any Font
Das Plugin Use Any Font erscheint nach der Installation in deinem WordPress-Seitenmenü. Praktischerweise beinhaltet es eine genaue Erklärung wie du mit seiner Hilfe neue Schriften zu deiner Website hinzufügen kannst:
- API Key verifizieren: entweder du generierst einen kostenlosen, einmaligen API Key (damit kannst du einmalig eine neue Schriftart hochladen) oder du kaufst dir den Premium Key für unbegrenzte Uploads.
- Hochladen deiner individuellen Schriftart
- Unter Assign Font kannst du nun die Schriftart den gewünschten Elementen zu ordnen
3. WordPress Schriftart herausfinden
Beim Stöbern auf anderen Websiten kommt es schonmal vor, dass du hin und weg bist von deren Design und dich davon für das Design deiner eigenen Website inspirieren lässt. Falls du genau die gleiche Schriftart wie diese andere Website benutzen möchtest, dann musst du irgendwie herausfinden welche Schriftart dort verwendet wird.
Das geht folgendermaßen (Erklärung für Google Chrome – kann bei Firefox oder Edge anders funktionieren und ist teilweise auch nicht mit jedem Browser möglich):
- Rechter Mausklick > Untersuchen oder Strg+Umschalt+I
- Im rechten Panel links oben auf den Pfeil mit Quadrat klicken.
- Anschließend mit deinem Mauszeiger über dem Text hovern, dessen Schriftart und -größe du wissen möchtest
- Alternativ kannst du auch auf den zu untersuchenden Textabschnitt klicken und dann im unteren rechten Fenster unter Styles nach font-family und font-size suchen.
Eine weitere Möglichkeit ist die Nutzung der Website MyFonts. Dort kannst du unter WhatTheFont! ein Bild der zu untersuchenden Website hochladen und den Bildausschnitt bestimmen. Anschließend wird dir die verwendete Schriftart genannt.
4. Fazit
Eine neue Schriftart deiner Website hinzuzufügen ist keine Hexenwerk und wenn du weißt wie es geht sehr schnell gemacht. Allerdings gibt es ein paar Sachen zu beachten. Die verwendete Schriftart sollte kostenlos verfügbar sowie websafe sein. Es wäre ungünstig, wenn du wegen der Schrift Strafe zahlen müsstest oder wenn die neue Schriftart nicht bei jedem Besucher deiner Website angezeigt werden könnte.
Wenn dir die Schriftarten deines Themes im Customizer nicht ausreichen, dann ist es für Anfänger empfehlenswert neue Schriftarten von Google Fonts per Plugin hinzuzufügen. Dadurch sparst du dir die Mühe via Code deine style.css-Datei zu verändern. Außerdem ist dies bei weitem der schnellste und unkomplizierteste Weg eine neue Schriftart zu nutzen.
Solltest du dich schon etwas mit CSS auskennen, dann kannst du natürlich die style.css-Datei auch von Hand ändern oder im Customizer dein eigenes CSS einfügen. Mit etwas Erfahrung geht dies ebenfalls sehr einfach.
5. FAQ – Häufige Fragen zu WordPress Schriftart ändern
Wie kann ich die Schriftgröße ändern?
Die Schriftgröße deines Textes bzw. deiner Überschrift kannst du ganz unkompliziert mit dem Gutenberg-Editor verändern. Dazu klickst du in den entsprechenden Block und anschließend auf die drei Punkte in der erschienen Leiste.
Dort kannst du weitere Einstellungen anzeigen auswählen und nun unter Block > Typografie die Schriftgröße ändern. Mit dem Shortcut Strg+Umschalt+, gelangst du schneller zu den weiteren Einstellungen.
Möchtest du die Schriftgröße per HTML/CSS ändern, dann musst du im HTML-Editor vor dem jeweiligen Textabschnitt folgenden HTML-Tag einfügen:
<p style="font-size:3">Hinter font size kannst du eine beliebige Zahl eintragen.
Wie kann ich die WordPress Schriftfarbe ändern?
Um deine Schriftfarbe zu ändern gehst du genauso vor wie wenn du die Schriftgröße ändern möchtest. Mit dem Shortcut Strg+Umschalt+, gelangst du zu den weiteren Einstellungen und dort kannst du unter Farbeinstellungen die Textfarbe anpassen.
Wenn du die WordPress Schriftfarbe per HTML ändern möchtest, dann setzt du folgenden Code vor den jeweiligen Textabschnitt:
<p style="font-color:brown">Anstelle von „brown“ kannst du verschiedene andere englische Farbbegriffe einsetzen oder den jeweiligen Hex-Code der gewünschten Farbe.
Was ist der Unterschied zwischen Webfonts, Websafe Fonts und lokal gehosteten Schriften?
Websafe Fonts sind Schriftarten, welche beim Besuch deiner Website von so gut wie jedem Endgerät und Browser angezeigt werden können. Entweder weil diese Schrift auf jedem Smartphone, PC und Tablet vorinstalliert ist oder weil diese Schrift ein Webfont ist.
Webfonts sind Schriftarten, welche dein Browser beim Besuch einer Website nicht aus der lokalen Schriftensammlung deines Computers lädt, sondern von einem externen Webserver.
Lokal gehostete Schriften werden nicht auf einem externen Server gespeichert, sondern direkt auf dem Webspace deiner Website. Normalerweise sind z.B. Google Fonts auf einem externen Webserver gespeichert, was zu etwas längeren Ladezeiten deiner Website führen kann.