WordPress Schriftarten ändern: Am 12. November 2024 ist ein neues Standardtheme mit dem Namen Twenty Twenty-Five (TT5) erschienen. Ich habe mir die in TT5 mitgelieferten Schriftarten (Fonts) angesehen.
Die Fonts von Twenty Twenty-Five
Folgende Schriftart-Kombinationen sind mit der Installation von TT5 für dich verfügbar:
- Standard (die Schriftart Manrope für Text + Überschriften)
- Platypi + Ysabeau Office
- Platypi + Literata
- Beiruti + Literata
- Roboto Slap + Manrope
- Literata + Fira Sans
- Vollkorn + Fira Code
- Literata + Isabeau Office
Die Schriftart-Kombinationen (jeweils eine Schriftart für Text + Überschrift) kannst du über die Stile zuweisen. Um zu den Stil-Einstellungen zu gelangen, klicke im Dashboard unter Willkommen bei WordPress in der rechten Spalte auf den Link Stile berabeiten.
Mit einem Klick auf Typografie kannst du dann die Schriftarten zuweisen – und zwar seit WordPress 6.7 unabhängig von deinem gewählten Stil.
Jetzt zeige ich dir, wie die mitgelieferten Fonts von Twenty Twenty-Five aussehen und für welche Arten von Websites sie geeignet sind.
Später zeige ich dir, wie du weitere Schriftarten installieren und den verschiedenen Elementen deiner Website (Texte, Links, Überschriften, Beschriftungen, Buttons) zuordnen kannst.
Die Fonts in der Übersicht
Manrope
Diese serifenlose Schriftart nennt sich Manrope. Für welche Websites ist Manrope geeignet?
Manrope ist eine moderne, aufgeräumte Schriftart, die sich vielseitig verwenden lässt. Manrope lässt sich gut mit anderen Schriftarten kombinieren.
Fira Code
Diese Serifenschrift nennt sich Fira Code.Für welche Websites ist Fira Code geeignet?
Fira Code ist eine sehr spezielle Schriftart. Sie ist für Websites zugeschnitten, die sich dem Programmieren widmen. Wenn du keine Technik-Website betreibst, ist Fira Code wahrscheinlich nicht geeignet.
Fira Sans
Diese serifenlose Schrift nennt sich Fira Sans. Für welche Websites ist Fira Sans geeignet?
Fira Sans ist eine dominante Schriftart. Für Boulevard-Websites ist Fira Sans gut geeignet.
Literata
Diese Serifenschrift nennt sich Literata. Für welche Websites ist Literata geeignet?
Literata ist eine klassische Buch- und Zeitungsschrift. Für Onlinemagazine und Buchblogger ist Literata ideal.
Vollkorn
Diese Serifenschrift nennt sich Vollkorn. Für welche Websites ist Vollkorn geeignet?
Vollkorn ist ähnlich wie Literata Für Onlinemagazine und Buchblogger ideal.
Ysabeau Office
Diese Serifenschrift nennt sich Ysabeau Office. Für welche Websites ist Ysabeau Office geeignet?
Ysabeau Office ist eine sehr noble Schriftart, ideal für Websites mit Bezug zu Bildung, Literatur, Museen oder klassischer Musik.
Platypi
Diese Serifenschrift nennt sich Platypi. Für welche Websites ist Platypi geeignet?
Platypi ist eine auffällige und etwas nostalgische Schriftart, ideal für Websites in den Bereich Entertainment und Retro-Gaming.
Ich mag den Retro-Stil von Platypi. Platypi ist die Überschriften-Schrift für den Stil Sunrise in TT5, kann aber, wie jede Schriftart, auch für jedem anderen Stil zugewiesen werden.
Google-Fonts in WordPress importieren
Deine Wunschschrift ist nicht dabei? Kein Problem, du kannst jede Google-Schriftart in WordPress importieren und installieren, Ich zeige dir Schritt für Schritt, wie das funktioniert.
Recherche auf Google Fonts
Los gehts nicht in WordPress, sondern zur besseren Übersicht auf der Website Google Fonts. Hier stöberst du die Google-Schriftarten durch. In der linken Seitenleiste von Google Fonts kannst du diverse Filtermöglichkeiten nutzen.
Hast du deinen perfekten Font gefunden? Den Namen der neuen Schriftart merkst du dir, dann wechselst du wieder zu WordPress. Für das folgenden Beispiel wurde die Google-Schriftart Archivo Black ausgewählt und der Name gemerkt.
Das Stilbuch öffnen
Weiter geht es im Stilbuch. Klicke dazu auf Design / Website-Editor und im Website-Editor dann auf den zweiten Menüpunkt von oben, nämlich auf Stile.
Jetzt werden die verschiedenen Stile angezeigt. Du willst deinen Stil mit einer Google-Schriftart ergänzen? Dann klicke auf Stil bearbeiten, also das Icon mit dem Stift.
Stil bearbeiten
Der Klick auf das Stift-Symbol öffnet den Stil-Bearbeitungs-Modus. Nach dem Klick auf den Stift geht es nicht in der linken, sondern in der rechten Seitenleiste weiter.
Klicke in der rechten Seitenleiste auf Typografie. Jetzt zeigt dir WordPress die bereits installierten Schriftarten an.
In der rechten Seitenleiste findest du bei SCHRIFTEN das Icon mit den zwei kleinen Schiebereglern. Klicke auf dieses Icon, um in die Schriftverwaltung von WordPress zu gelangen.
Schriftverwaltung von WordPress öffnen
Jetzt bist du in der Schriftverwaltung von WordPress. So installierst du eine neue Schrift:
- Oben werden drei Register angezeigt. Klicke ganz rechts auf das Register Schriften installieren.
- WordPress verbindet sich nun mit Google Fonts (was ich ziemlich genial finde).
- Gib den Namen der gewünschten Schriftart in das Suchfeld Name der Schrift ein.
Vor der Installation fragt WordPress nochmal nach: Willst du dich wirklich mit Google Fonts verbinden? Die Antwort heißt: Ja! Klicke auf den großen blauen Button Den Zugriff auf Google Fonts erlauben. Falls du den Zugriff verweigerst, wird es nämlich komplizierter. Dann blendet WordPress das Register Schriftart installieren aus und du musst den gewünschten Font erst von Google auf deinen Computer herunterladen und dann über das Register Hochladen importieren.
Neue Schrift installieren
Im Beispiel wird jetzt die kräftige Schriftart Archivo Black installiert:
- Das Register Schriften installieren ist ausgewählt.
- Die Schriftart Archivo Black wurde ins Suchfeld eingegeben.
- Archivo Black wird angezeigt.
Mit einem Klick auf den Namen Archivo Black öffnet sich das Installationsfenster.
- Die Checkbox vor der neuen Schriftart Archivo Black ist aktiviert.
- Rechts unten: Über den blauen Button Jetzt installieren rechts wird die neue Schriftart Archivo Black installiert.
WordPress meldet: Die Schriften wurden erfolgreich installiert. Theoretisch ist es auch möglich, mehrere Schriften gleichzeitig zu installieren. Im Beispiel wurde aber nur eine hinzugefügt.
Ein kleiner Hinweis zur Anzahl der Schriftarten: Der Einsatz zu vieler unterschiedlicher Schriftarten wirkt unprofessionell, in der Regel genügen zwei unterschiedliche Fonts: Eine für die Überschriften und eine für die Texte.
Bei manchen Fonts sind aber merere Varianten verfügbar. In diesem Fall ist es am besten., alle Varianten eines Fonts auszuwählen und zu installieren.
Verfügbare Schriften überprüfen
Ein Klick auf Typografie / Schriften zeigt: Ab jetzt ist die neue Schriftart Archivo Black in WordPress verfügbar. Für den Einsatz sind zwei Optionen möglich:
- Option 1: Die neue Schriftart wird nur an bestimmten, manuell ausgewählten Stellen eingesetzt.
- Option 2: Die neue Schriftart wird auf der gesamten Website für bestimmte Einsatzgebiete zum Standard. Sie soll beispielsweise in sämtlichen Überschriften eingesetzt werden.
Neue Schriftarten zuweisen
Los geht es mit der manuellen Zuweisung, also der Zuweisung des neuen Fonts an ausgewählten Stellen.
Eine Schriftart manuell zuweisen
Um die Schriftart manuell auszuwählen, erstellst du zunächst einen ganz normalen Textblock, also einen Absatz-Block. So geht es dann weiter.
- Klicke in der rechten Seitenleiste oben auf Block.
- Klicke in der rechten Seitenleiste unten auf Typografie. Jetzt klappt das Typografie-Menü auf.
- In diesem Typografie-Menü ist standardmäßig nur ein Haken hinter Größe gesetzt. Setze einen weiteren Haken hinter Schrift.
Jetzt kannst du dem Block eine spezielle Schriftart zuweisen. Im Auswahlfenster für die Schriftarten befindet sich auch die neu installierte Schrift Archivo Black.
Beispiel: Diesem Textblock wurde die Schriftart Archivo Black zugewiesen. Deswegen ist er so fett.
Achtung: Standard steht im Schriftauswahl-Fenster ganz oben. Allerdings ist Standard nicht der Name irgendeiner Schriftart. Wenn du Standard zuweist, wird die ursprünglich von deinem Stil vorgesehene Schriftart verwendet. Im Stilbuch kannst du aber diese Standard-Schriftart neu defineren, das machen wir jetzt an einem Beispiel!
Eine Standard-Schriftart neu definieren
Jetzt gehts los, die Standard-Schriftart soll neu definiert werden. Zur Orientierung:
- Das Icon mit dem Halbmond ist sichtbar: Du befindest dich bei den Stilen.
- Das Icon mit dem Auge ist sichtbar: Du befindest dich im Stilbuch.
- Typografie ist ausgewählt. Du änderst also etwas in der Typografie.
Jetzt kannst du, wenn du das Theme Twenty Twenty-Five verwendest, sehr genau bestimmen, welche Elemente mit welcher Schriftart versehen werden sollen. Bei anderen Block-Themes sind weniger Feineinstellungen möglich.
Im Beispiel wird die Standard-Schriftart für die Überschriften ersetzt.
- Im Beispiel ausgewählt ist Alle Überschriften. Möglich wäre es aber auch, nur eine bestimmte Überschriften-Ebene zu ersetzen, zum Beispiel alle H2-Überschriften.
- Voreingestellt ist die Standard, also die Standard-Schriftart des ausgewählten Stils.
- Diese Standard-Schriftart wird durch Archivo Black ersetzt. Alle Überschriften werden nun in der Schriftart Archivo Black dargestellt.
Anhang 1: Riskiere ich eine Abmahnung für Schriftarten?
Wer schon etwas länger Websites betreibt, erinnert sich noch an das Jahr 2023. Damals waren viele (WordPress-) Admins von einer Abmahnwelle wegen der Verwendung von Google Fonts betroffen. Grund war aber nicht die Verwendung von Google Fonts, sondern die Art der Einbindung. Für die Einbindung von Schriftarten haben Website-Betreiber grundsätzlich zwei Optionen:
- Google Fonts liegen nur auf den Servern von Google
Der auf der Website eingesetzte Google Font wird, sobald ein Besucher die Website aufruft, von den Google-Servern geladen. Dabei sammelt Google ungefragt, and das war der Anlass für die Abmahnwelle, Informationen über das Besucherverhalten. Es besteht also eine sogenannte Auftragsdatenverarbeitung (AV): Der Seitenbetreiber erhebt Daten im Auftrag von Google.
Anmerkung: Was 99 % der Seitenbetreiber gar nicht wussten. - Google Fonts befinden sich im Fonts-Ordner von WordPress
Der Betreiber der Website hat alle eingesetzten Google Font svon den Google-Servern heruntergeladen und in WordPress importiert. Der Font befindet ist also innerhalb der WordPress-Installation. Damit werden keine Besucherdaten an Google weitergegeben. Eine Auftragsdatenverarbeitung findet nicht statt. Diese Option ist in diesem Tutorial beschrieben. Wenn du dieses Tutorial befolgt hast, bist du auf der sicheren Seite.
Anhang 2: Gibt es Alternativen zu Google Fonts?
Über das Register Hochladen in der WordPress-Schriftverwaltung kannst du auch andere Schriftarten lokal installieren. Der Haken bei der Sache: Deine Besucherinnen und Besucher sind mit sehr unterschiedlichen Browsern (und Endgeräten) unterwegs und nicht jeder Browser und jedes Endgerät kann jede Schriftart korrekt darstellen.
Beim Einsatz von Google Fonts kannst du davon ausgehen, dass sie von 99,9 Prozent aller Besucher korrekt dargestellt werden. Beim Einsatz von Fonts aus anderen Quellen, zum Beispiel Adobe Fonts, ist es empfehlenswert, die Darstellung ausgiebig mit verschiedenen Endgeräten und Browsern zu testen. Hinzu kommt die rechtliche Unsicherheit beim Einsatz von Adobe Fonts. Wenn du kein Abo bei Adobe hast, darfst du möglicherweise bestimmte Schriftarten nicht einsetzen.
Fazit: Wenn du dich nicht eingehend mit Browsertypen und Lizenzbedingungen auseinandersetzen möchtest, sind importierte Google-Fonts im Vergleich zu Adobe Fonts die unkompliziertere Option.
Neue Beiträge auf Standardthemes.de
Wie gefallen dir die Schriftarten in Twenty Twenty-Five? Hast du eine Lieblings-Schrift?
Dann schreib einen Kommentar.
Schreibe einen Kommentar