Wenn es um Design geht, darf Typografie nicht fehlen – das gilt natürlich auch im World Wide Web. Doch ist die Umsetzung guter Typografie auf Websites nicht so ganz einfach.
Die Auswahl passender Schriftfamilien für ein Web-Projekt ist schon eine Kunst für sich. Hinzu kommen technische Hürden, gerade bei einem System wie WordPress, das aus verschiedenen Plugins zusammengesetzt wird.
Für viele Jahre war eine laufende Lösung oft nur mit der richtigen Kombination aus Theme, Plugins und Code-Schnipseln möglich. Das führte nicht selten zu wilden Effekten und Problemen: die Ladegeschwindigkeit litt zum Beispiel. So wurde teilweise die gleiche Schriftfamilie mehrfach geladen, weil sie von mehreren Quellen adressiert wurde, nur damit mehrere Plugins, die sich gegenseitig nicht kannten, den Text gleich gestalteten.
Und dann kam noch das Thema Datenschutz hinzu, spätestens mit der DSGVO. Nicht alle Plugins oder Themes legen das höchste Augenmerk auf dieses Thema und machen damit Websites das Leben schwer. Viele haben deshalb Schriften extern geladen – etwa von Google Fonts oder anderen Anbietern – statt vom eigenen Server. Ein Problem, das für Icons immer noch nicht ganz gelöst ist.
Im April 2024 hat WordPress mit der Version 6.5 eine großartige Funktionalität eingeführt, die das Chaos von Technik- und Datenschutzproblemen bei Schriften deutlich vereinfacht. Die Font Library wurde vorgestellt.
Das kann die Schriften-Zentrale von WordPress
Die Font Library ist keine Sammlung von Schriften selbst, sondern eine einheitliche Verwaltungszentrale. Sie ist die Schnittstelle für Themes und Plugins, um Präsentation, Verwaltung, Speicherung und Laden von Schriften zu regeln.
Wer an der Typografie einer Website arbeiten will, findet nun im Website-Editor eine offizielle Anlaufstelle, die komplexe technische Schritte hinter einer Oberfläche verbirgt.
Spielt nur mit Blöcken
Wichtig zu wissen: Leider kann die neue Oberfläche nur mit Themes genutzt werden, die auch Blöcke unterstützen, also nur mit „echten“ Block-Themes oder Hybrid-Themes.
Bei klassischen (nicht blockbasierten) Themes muss man weiterhin mit Fachwissen ran, oder man muss die passende aus den vielen Lösungen herausfinden.
Es gibt zwar ein Ticket im Gutenberg-Projekt, das hier Verbesserungen anstrebt, aber das braucht noch Unterstützung und Entwicklung, um realisiert zu werden.
Eine Führung durch die Schriften-Bibliothek
Trotz ihrer Wichtigkeit für das gute Aussehen einer Website ist die gesamte Funktion recht tief versteckt. Ausgehend vom Dashboard des WP-Admins führt der Untermenüpunkt Editor unter Design in den Website-Editor. In der dunklen Seitenleiste links geht es mit einem Klick auf Stile weiter. Die erscheinende helle Seitenleiste bietet nun das Thema Typografie zum Klicken an.
Font Library – Typografie
Je nach Theme müssen wir die Schriftsätze übersehen und finden den entscheidenden Button neben der Überschrift Schriften. Nach dem Klick auf das Icon der Regler öffnet sich die Schriftenverwaltung in einem überlagernden Fenster.
Font Library – Schriften
Nun sind wir im Herzstück angekommen. Der erste Tab im Fenster (Bibliothek) gibt einen Überblick über alle einsatzbereiten Schriftarten.
Je nachdem, was das aktive Theme bereits an Schriften mitbringt, ist die obere Liste länger oder kürzer. Beim Theme-Wechsel ändert sich diese Liste.
Am unteren Ende ist die Liste Individuell zu finden: Hier sind alle Schriften, die aus den verschiedenen im folgenden besprochenen Quellen stammen. Diese individuellen Schriften bleiben unverändert, auch wenn das Theme gewechselt wird.
Varianten aktivieren
Jede Schrift braucht mindestens eine aktive Variante, auch Schrift-Schnitt genannt, sonst gilt sie als nicht einsetzbar.
Die Anzahl der installierten Varianten sehen Sie rechts neben dem Schriftnamen. Ein Klick auf eine Schrift öffnet die tiefere Ebene.
Font Library – Schriften – Open Sans
Hier steht nun detailliert, welche Varianten installiert sind. Diese lassen sich einzeln aktivieren oder deaktivieren – damit steuern Sie genau, welche Varianten im Frontend geladen werden.
Wenn Sie früher etwa die 700 Italic (fett und kursiv), wie im Bild oben, z.B. in einer Überschrift verwendet haben und diese Variante nun aber deaktivieren, zeigt das Frontend nur noch die verbleibenden aktiven Varianten. Der Text, der zuvor fett und kursiv dargestellt wurde, ist dann nur noch fett, so lange die 700 Variante aktiv ist.
Das kann bewusst genutzt werden, kann aber auch zu Verwirrung führen, wenn man die Änderung nicht bedacht hat.
Mehr Schriften müssen her
Manche Themes bringen eine ganze Reihe an Schriftarten mit sich, aber wenn trotzdem nicht die passende dabei ist, ist das kein Problem.
Ein komfortabler Weg, an weitere Schriftarten zu kommen, ist der dritte Tab in diesem Fenster, der direkten Zugang zu Google Fonts und damit einer umfangreichen Auswahl an Schriften bietet.
Font Library – Schriften – Google Fonts
Nach dem Klick auf den Button für die Erteilung des Einverständnis lädt WordPress eine lange Liste an Schriftarten, die für die Installation zur Verfügung stehen.
Ein Suchfeld und Kategorienfilter helfen, die Liste einzuschränken. Die Werkzeuge unten können dann zum Durchblättern des Ergebnisses genutzt werden.
Font Library – Schriften – Google Fonts Übersicht
Die Namen der Schriften dienen auch gleichzeitig als Vorschau. Für einen echten Bewertungsprozess ist das sicherlich nicht perfekt, aber hilfreich beim Wiederfinden.
Das Ausprobieren ganzen Schriften ist dann doch immer noch auf der eigentliche Website der Google Fonts gemacht.
Ist die gewünschte Schrift gefunden, öffnet der Klick auf die Zeile die Liste der installierbaren Varianten.
Gerade bei eher dekorativen Schriften gibt es oft nur eine Variante. Bei beliebten Schriftarten, die für Fließtexte gedacht sind, gibt es auch gerne mal eine ganze Reihe an Schnitten. Eine gezielte Installation nur der wirklich nötigen Varianten spart Speicherplatz auf dem Server und vergrößert Backups nicht unnötig.
Nach dem Klick auf den Installieren-Button werden die gewünschten Varianten der Schriftart automatisch von Google heruntergeladen und in einem standardisierten Ordner unter wp-content/uploads/fonts in der eigenen Website abgelegt. Hier liegen die Schriften update-sicher und werden von der Font Library verwaltet.
Font Library – Schriften – Google Fonts Open Sans
Es muss die Hausschrift sein
Ihr Projekt hat eine eigene Hausschrift, oder Sie haben sich für eine besondere Schrift entschieden, die nicht auf Google Fonts zu finden ist? Auch hier lässt uns WordPress nicht im Stich.
Über den zweiten Tab im gleichen Fenster (Upload) können Sie Schriftdateien vom eigenen Rechner hochladen. Einfach per Drag-and-Drop die Schrift im passenden Format in die Font Library ziehen und fallen lassen.
Font Library – Schriften – Schriften Upload
WordPress unterstützt verschiedene Schrift-Formate, auch ältere sowie das modernste und speziell für das Internet gemachte WOFF2.
Installation ist der erste Schritt
Egal, ob über Google Fonts oder direkt vom eigenen Gerät hochgeladen, alle installierten Schriften werden im ersten Tab der Font Library aufgelistet und können hier gesichtet und aktiviert werden.
Wenn dann doch mal eine Schrift zu viel installiert wurde, kann diese über den Löschen-Button unterhalb der Varianten-Liste wieder deinstalliert werden.
Ausschließlich komplette Schriftarten können deinstalliert werden. Wenn nur eine Variante entfernt werden soll, muss man Aufwand für Löschung und Wiederinstallation auf sich nehmen oder damit leben.
Font Library – Schriften – Bibliothek
Bereitgestellte Schriftarten in den Einsatz bringen
Bisher haben wir nur eine Auswahl an Schriften einsatzbereit gemacht, indem sie entweder zusammen mit dem Theme auf den Server geladen oder manuell auf dem eigenen Server installiert wurden.
Damit nun auch endlich die geplante Gestaltung sichtbar wird, muss das überlagernde Fenster über das X oben rechts oder per Klick auf den Schatten rund um das Fenster geschlossen werden.
Anschließend kann es nötig sein, die jetzt wieder sichtbare helle Seitenleiste nach unten zu scrollen, damit der Bereich Elemente erscheint.
Font Library – Schriften – Bereitgestellte Schriftarten
Hier lassen sich neben der Schriftart auch viele andere typografische Einstellungen für globale Elemente vornehmen. Diese Einstellungen gelten websiteweit – egal, ob es sich z.B. um den Beitragstitel oder eine H3 in der Datenschutzerklärung handelt.
Font Library – Überschriften
Diese Elemente sind nicht das gleiche wie ein Block. Blöcke können aus einem oder mehreren Elementen bestehen.
Jeder Block nur für sich
Blöcke verwenden zunächst die Standard-Schriftart. Diese entspricht der Einstellung, die im Website-Editor für das entsprechende Element festgelegt wurde. Um einen einzelnen Block, z.B. eine Überschrift oder einen Produktnamen, mit einer Schnuck-Schrift auszuzeichnen, gibt es in den Block-Eigenschaften (rechte Seitenleiste) eine Sektion Typografie. Hinter den drei senkrechten Punkten lässt sich die Einstellung für die Schriftart aktivieren, die dann für diesen einen Block gilt.
Font Library – Untertitel
Wird eine Schriftart aus der Liste der individuellen Schriften festgelegt, bleibt diese lokale Überschreibung auch nach dem Wechsel des Themes bestehen.
Des weiteren sollte mit solchen lokalen Überschreibungen vorsichtig umgegangen werden, sie lassen sich bei größeren Inhaltsmengen nur aufwendig manuell wieder entfernen.
Aufräumen, was nicht gebraucht wird
Allgemein gilt, dass man mit 2-3 Schriftarten sehr wahrscheinlich auskommt:
- eine für Fließtext,
- eine für Überschriften,
- und wenn es auffällig sein soll, eine Schrift für besondere Texte oder ausgewählte Überschriften.
Auch wenn die Technik hinter der Font Library sehr gut darin ist, im Frontend keine unnötigen Schriften zu laden, macht man sich selber das Leben einfacher, wenn man nur die genutzten Schriften aktiv hält. Sonst taucht plötzlich irgendwo auf der Website Text auf, der so gar nicht nach dem eignen Branding aussieht, weil jemand die Einstellung der Schriftart in den Tiefen des Block-Editors entdeckt hat.
Jede Schrift bzw. Variante macht die Website durch kleinste Mengen an erzeugtem CSS ein winziges Stück technisch schwerer. Alles Dinge, die man dem Erfolg der Website so einfach schenken kann, indem man etwas Ordnung hält.
Google Fonts und Uploads machen den Job
Mit der Möglichkeit, sich eine Schrift aus dem umfangreichen Google Fonts-Katalog auszusuchen oder sehr individuelle Schriften hochladen zu können, scheint die Core-Funktion so ziemlich alles abzudecken. Es gibt nur ein Plugin (wir schauen es uns gleich noch an), das der Font-Library eine Funktion hinzufügt.
Darf es noch etwas leichter sein?
Wenn die genaue Schriftart nicht wichtig ist und dafür eine noch „leichtere“ Website gewünscht wird, ist die Nutzung von Fonts-Stacks (übersetzbar mit: Schriftarten-Stapel) eine tolle Möglichkeit.
Wer das nicht über das eignen Theme erreichen kann/will, findet mit Modern Fonts for Font Library von Matias Benedetto ein praktisches Plugin.
Nach der Installation aus dem offiziellen Plugin-Repo und der Aktivierung gibt es in der Font-Library einen weiteren Tab (Modern Fonts Stacks). Dort lassen sich aus einer Liste Fonts-Stacks auswählen und diese dann als Schriftart für Elemente festlegen, wie zuvor mit einzelnen Schriftarten gezeigt.
Nun kommt die Website ganz ohne Schriftdateien aus, und trotzdem lassen sich Elemente unterschiedlich gestalten. Eine tolle Möglichkeit zur Optimierung für mobile Geräte oder Zielgruppen mit begrenzter Bandbreite oder begrenztem Datenvolumen.
Gibt es auch per Code
Dieser Artikel hat sich bewusst auf die Verwaltung von Schriften mittels der grafischen Oberfläche konzentriert. Die Vorteile der zentralen Schriftenverwaltung lassen sich aber auch per Code realisieren. Die technischen Details, um die eigene theme.json-Datei korrekt zu erweitern, sind im Theme-Handbuch oder in der Zusammenfassung von Carolina Nymark zu finden.
Fazit: die Font Library in WordPress
Die Font Library ist eine durchdachte, “unter der Haube” aufwendige Lösung, die das Gestalten von Websites erfreulich vereinfacht – ohne dabei Datenschutz und Website-Performance zu vernachlässigen.
Das Fachwissen über die Auswahl und den Einsatz der richtigen Schrift kann sie nicht ersetzen, aber sie macht es sehr viel einfacher, diese Entscheidungen konsistent und technisch sauber umzusetzen.
Titelmotiv: Photo by CHUTTERSNAP on Unsplash
- Endliche eine saubere Lösung, Schriften zu verwalten: die Font Library in WordPress - 5. März 2026
- HPOS in WooCommerce: Was ist das, und wie beschleunige ich damit meinen Shop? - 9. Dezember 2024
- Website-Inhalte synchron halten in Form und Inhalt durch synchronisierte Vorlagen in WordPress - 10. September 2024
