Webfonts lokal in WordPress hosten: Der ultimative Guide mit allen Vor- und Nachteilen

Moderne WordPress Themes kommen nur sehr selten ohne Webfonts aus. Die Schriftarten gehören mittlerweile als fester Bestandteil mit dazu, wenn es um die Gestaltung einer Website geht. Sie heben die allgemeine Optik ein wenig vom gängigen Standard ab und bringen auf diese Weise eine ganz persönliche Note mit ein.

Aufgrund der schieren Vielzahl an verfügbaren Webfonts, vor allem auch durch den Service Google Fonts, gibt es mittlerweile schier endlose Möglichkeiten, was die auf Websites verwendeten Schriftarten angeht. Ganz gleich ob Serif, Sans-Serif, Slab-Serif, Display oder gar Monotype, von nahezu jeder Art Schrift gibt es inzwischen eine frei verfügbare Variante, die einfach und schnell in den eigenen Blog eingebunden werden kann.

Doch worauf ist dabei, speziell im Falle WordPress, zu achten? Wie DSGVO-Konform sind Webfonts überhaupt und wie lassen sie sich einfügen, ohne einen negativen Einfluss auf die Performance zu nehmen? All das möchte ich euch in diesem Beitrag ein wenig genauer erläutern, denn viel zu oft fallen mir WordPress Blogs und sogar Premium WordPress Themes auf, die es schlichtweg falsch machen. Zeit für ein wenig Aufklärung diesbezüglich.

Worum es bei Webfonts wirklich geht

Schriftarten gibt es eine ganze Menge. Die meisten davon waren und sind mit strengen und teuren Lizenzen versehen. Nur große Unternehmen leisten es sich, eine eigene Schrift zu entwickeln oder ihren Brand mit einer entsprechenden Typografie zu verbinden. Schriften, wie die DB Type der Deutschen Bahn, sind dann allerdings auch sofort erkenntlich und stammen von erfahrenen Profis wie Erik Spiekermann. Sie sollen die Klarheit einer Marke fördern und sorgen für einen augenblicklichen Wiedererkennungswert.

Für Webfonts gilt das nicht unbedingt. Den meisten Bloggern geht es eher darum, ein bestimmtes Gefühl zu vermitteln und etwas anderes als die Standardschrift zu verwenden. Schriftarten können lange Texte auflockern, komplizierte Texte besser lesbar werden lassen und schöne Texte ebenso schön in Szene setzen. Darauf kommt es den meisten an, nicht auf die Markenbildung oder eine Besonderheit im Schriftbild.

Seit die Einbindung für Websites so problemlos möglich geworden ist und Webfonts in gewisser Art und Weise zum Gesamtbild dazugehören, haben auch viele WordPress Themes bereits eine Auswahl an Schriftarten integriert. Diese können größtenteils frei gewählt werden oder aber es gibt zumindest einige unterschiedliche Fonts zur Auswahl. In aller Regel handelt es sich in solch einem Fall um Google Fonts, da diese Open Source und dementsprechend frei nutzbar sind. Letzteres ist bei Schriftarten nicht immer der Fall, wie ich zuvor bereits erwähnt hatte. Doch schauen wir uns das Thema der Schriftlizenzen noch einmal genauer an.

Die Sache mit den Schriftlizenzen

Prinzipiell gibt es sehr viele Anbieter für Webfonts, doch die meisten der Lizenzen sind derart limitiert, dass ein Kauf geradezu sinnlos erscheint. Zunächst einmal muss jeder Schrifttyp (regular, bold, italic etc.) einzeln gekauft werden. Dann wiederum gilt die Lizenz überwiegend nur für eine einzige Publikation, kann also nicht in Mails oder PDFs verwendet werden, die vielleicht aber vereinzelt erstellt werden sollen. Außerdem ist speziell die Webfont oft an zusätzliche Bedingungen geknüpft und häufig auch nur für eine bestimmte Anzahl an Seitenaufrufen lizenziert. Der Preis beginnt bei einigen hundert Euro, steigt dann aber schnell in die Höhe, sodass Blogger und Privatnutzer häufig bei Summen landen, die völlig absurd für einen Blog erscheinen. Zumal die Lizenzgebühren in der Regel pro Jahr fällig werden, also wiederkehrend sind.

Um ehrlich zu sein, ergibt der Kauf einer Schrift im Regelfall daher auch keinen Sinn. Nicht einmal für Unternehmen, die sich auf diese Weise nur laufende Kosten aufhalsen. Stattdessen scheint es sinnvoll zu sein, die Fonts gleich über Google Fonts einzubinden. Die sind nämlich Open Source und somit kostenlos verwendbar. Genau so handhaben es viele WordPress Themes. Auch deshalb, weil die Einbindung via Google Fonts in der Regel nur wenige Zeilen Code erfordert und sofort funktioniert. Doch ganz so einfach ist es dann auch wieder nicht.

Denn dann stellt sich die Frage, ob es besser ist, die Schriftart selbst hochzuladen oder die Cloud und das CDN von Google zu nutzen? Beides hat seine Vor- und Nachteile, auf die ich im nächsten Absatz noch einmal eingehen möchte.

Möglichkeiten zum Laden einer Webfont

Prinzipiell ist die Google Cloud extrem schnell und daher auch empfehlenswert. Hier muss nur die gewünschte Schriftart ausgewählt und ein kurzer Code kopiert werden. Doch was Google beim Abruf der Webfont da genau erfasst und was nicht, bleibt erst einmal unklar und undurchsichtig. Logisch also, dass dies kaum mit der DSGVO vereinbar zu sein scheint. Deshalb führte die Verwendung von Google Fonts in der Vergangenheit auch bereits zu Abmahnungen. Die Einbindung über Google ist in Europa daher rechtlich problematisch zu betrachten und sollte unbedingt vermieden werden.

Wann immer Google Fonts in eurem WordPress Theme vorhanden sind, gilt es also zu prüfen, wie diese genau geladen werden. Findet keine lokale Speicherung der Webfonts statt, ist die Art der Einbindung höchstwahrscheinlich auch nicht DSGVO-Konform. Es ist daher wichtig, darüber Bescheid zu wissen, woher die Schriftarten genau stammen (Themes, Plugins etc.) und wie sie von dort aus abgerufen werden.

Bei einem lokalen Hosting der Google Fonts habt ihr die Dateien auf eurem eigenen Server oder Webspace liegen. Diese müssen von Nutzern natürlich erst heruntergeladen werden. Das wiederum hat Einfluss auf die Performance, da der eigene Server meist nicht so standhaft ist wie die Server von Google. Dafür ist das lokale Speichern allerdings DSGVO-Konform, weil die Webfonts nicht erst von externen Quellen geladen werden müssen, sondern direkt bei euch abrufbar sind.

Google Fonts händisch hinzufügen

Schlauer ist es also, die automatische Integration der Google Fonts vollständig zu unterbinden. Stattdessen kann dieselbe Schriftart lokal eingebunden werden. Wie das gelingt, selbst dann, wenn Themes oder Plugins bereits Google Fonts hinzufügen, zeige ich euch jetzt in meiner ausführlichen Anleitung.

1. Die gewünschte Google Font von dieser Website herunterladen. Dort könnt ihr die verschiedenen Schrifttypen besonders einfach auswählen und anschließend in allen Formaten, die Google Fonts anbietet, herunterladen. Wählt also die Schriftart, den Schrifttyp und das Charset (Standard ist Latin) aus und klickt unten auf den Download Button, um die Webfont vollständig herunterzuladen.
2. Ladet die Schriftarten nun nach Anleitung auf eurem Server oder Webspace hoch. Die Dateien müssen in der Standardeinstellung im Ordner »fonts« liegen. Und zwar im Hauptverzeichnis eures Blogs. Stimmt das Verzeichnis nicht mit dem in Schritt drei angegeben überein, können die Webfonts auch nicht korrekt geladen werden.
3. Kopiert jetzt den auf der Website automatisch generierten CSS-Code. Dieser sorgt dafür, dass die Webfonts, die eben heruntergeladen und dann wieder hochgeladen wurden, korrekt eingebunden sind und innerhalb von WordPress entsprechend verwendet werden können. Wer nicht weiß, wie CSS-Code eingefügt wird, kann dafür ein Plugin wie Simple CSS verwenden. Das vereinfacht die ganze Sache abermals.
4. Damit die Webfont korrekt auf eurer WordPress Website verwendet wird, müsst ihr diese anschließend noch zu den Styles hinzufügen. Auch das kann mittels Simple CSS für die jeweiligen Klassen und via »font-family« vollzogen werden. Keine Sorge, es ist eigentlich ganz einfach, probiert es also ruhig mal aus. Für Überschriften wählt ihr H1 bis H6 und für den Fließtext den Body-Tag. Für beides hinterlegt ihr dann als Font-Family die neue Schrift.
5. Achtet nun aber unbedingt noch darauf, dass euer WordPress Theme (oder ein aktiviertes Plugin) keine eigenen Google Fonts einbindet. Um genau das zu verhindern, können Google Fonts mit Plugins wie Autoptimize auch komplett deaktiviert werden. Ein weiteres Plugin, welches diese Aufgabe übernimmt, hört auf den Namen Disable and Remove Google Fonts. Schaut einfach selbst, welches für euren WordPress Blog am zuverlässigsten funktioniert.

Das war dann im Grunde auch schon alles. Mit diesen fünf Schritten habt ihr dafür gesorgt, dass die Google Fonts lokal geladen werden und nicht mehr von den Google-Servern. Außerdem sind alle Einbindungen (z. B. über Themes und Plugins) entsprechend deaktiviert worden. Via CSS habt ihr die Schriften obendrein korrekt integriert und für die entsprechenden Klassen als Font-Family ausgewählt, damit sie auch korrekt dargestellt werden können. Mehr ist dann auch nicht mehr notwendig.

Google Fonts per Plugin integrieren

Es gibt noch eine weitere, für viele sicherlich einfachere Möglichkeit, die oben genannten Schritte durchzuführen. Das Plugin Optimize Google Fonts. Ganz grob gesagt, scannt die Erweiterung euren WordPress Blog auf Google Fonts und lädt diese dann automatisch herunter, um sie als Webfont lokal einzubinden. 

Achtet bei dieser automatisierten Methode aber unbedingt darauf, dass die Erweiterung korrekt funktioniert, da es sonst Probleme mit dem Datenschutz geben kann. Eine Alternative, die ebenfalls das lokale Hosting von Google Webfonts beherrscht, ist Perfmatters. Auch hier werden Google Fonts deaktiviert und können dann lokal abgerufen werden, je nachdem welche Optionen gewählt wurden.

Für welche Möglichkeit ihr euch auch entscheidet, prüft immer noch einmal händisch nach, ob die Google Fonts auch tatsächlich korrekt eingebunden wurden. Wer übersieht, dass die Webfonts weiterhin von fremden Servern stammen, dies aber nirgends erwähnt oder eine Einwilligung dafür verlangt, riskiert hohe Strafen in Bezug auf die DSGVO.

Webfont-Formate und ihre Einsatzgebiete

Google Fonts und Webfonts im Allgemeinen gibt es in ganz unterschiedlichen Formaten. Jedes Format hat dabei seine eigenen Vor- und Nachteile. Ihr kennt das sicherlich von den Bildformaten und der damit verbundenen Optimierung. Bei Schriftarten ist es im Grunde nicht viel anders, weshalb ich euch die verschiedenen Formate hier einmal kurz und knapp erklären möchte.

• eot: Ein absolut veraltetes und nicht mehr genutztes Format, welches von Microsoft stammt. Das .otf-Format wird tatsächlich nur noch in sehr alten Versionen des Internet Explorers eingesetzt und ist somit auch kaum noch notwendig.
• woff2: Das .woff2-Format stammt von Google und ist auf eine schnelle Auslieferung und eine geringe Speichergröße hin optimiert worden. Das moderne Webfont-Format wird von nahezu allen modernen Browsern unterstützt und ist somit der derzeitige Standard, wenn es um das Einbinden von Schriftarten in Websites geht.
• woff: Das Web Open Font Format ist der Vorgänger von .woff2 und wird somit logischerweise einfach .woff genannt. Die Kompatibilität mit alten Browsern ist hier ein wenig höher, da das Format einfach deutlich älter ist. Dafür sind die Schriftarten in .woff aber auch noch größer als in .woff2 und somit weniger auf eine schnelle Auslieferung hin optimiert.
• ttf: TrueType ist ein Standard für Schriften, der in den 80er Jahren von Apple eingeführt und später von Microsoft lizenziert wurde. Es ist kein modernes Format, funktioniert aber oft noch einwandfrei und wird daher gerne als universeller Fallback genutzt.
• svg: Eigentlich sind vektorbasierte Fonts, speziell für Icon Fonts, gar keine so schlechte Idee. SVG Fonts werden derzeit aber nur vom Safari Browser unterstützt und spielen daher nur eine geringe Rolle.

Welche Webfont-Formate ihr auf euren Server hochladet, ist am Ende gar nicht so wichtig, wie es zunächst scheint. Genutzt wird nämlich ohnehin immer nur eines davon. Und zwar das, welches der jeweilige Browser auf dem entsprechenden Betriebssystem unterstützt. In der Regel ist das heutzutage immer .woff2, es sei denn, es handelt sich um ein veraltetes System. In diesem Fall ist ein entsprechender Fallback hilfreich.

Fazit zu Webfonts im eigenen Blog

Speziell die DSGVO hat für viele Blogger einen Strich durch die Rechnung gemacht. Wer in Europa entsprechende Publikationen anbieten möchte, muss entweder dafür sorgen, dass europäische Server bereitstehen oder aber die Einwilligungen korrekt eingeholt sind, bevor Fonts und andere Assets geladen werden. Die nervigen Cookie-Benachrichtigungen etc. kennen wir alle und niemand will sie sehen, weshalb die lokale Speicherung oft sinnvoller erscheint, als seine Besucher zu gängeln.

Webfonts lokal zu speichern, ist für Profis auch gar nicht so aufwendig. Nur die Anfänger und diejenigen, die mit der Technik hinter WordPress nur wenig vertraut sind, tun sich oft etwas schwer damit. Dabei ist es auch für diese im Grunde keine große Schwierigkeit, das automatische Einbinden der Google Fonts (zum Beispiel durch WordPress Themes oder Plugins) zu verhindern und diese anschließend selbst hinzuzufügen. Zur Not geht das sogar vollautomatisch über ein entsprechendes WordPress Plugin. Die Möglichkeiten hatte ich euch weiter oben aber allesamt bereits vorgestellt.

Am Ende ist es außerdem selten gut, sich von Drittanbietern oder fremden Services abhängig zu machen. Laden Schriften dann plötzlich nicht mehr korrekt oder steht Google bei irgendwem auf der AdBLock-Liste, sieht auch die eigene WordPress Website gleich ganz anders als gewohnt aus. Wer Webfonts hingegen einfach selbst einbindet, kann diese auch immer korrekt anzeigen und zudem nach Bedarf ändern, anpassen oder korrigieren, ohne dafür erst URLs wechseln zu müssen. Und wer seinen Blog ohnehin schon selbst hostet, der sollte das bei den Schriften auch nicht anders handhaben. Oft ist es schließlich nur die Bequemlichkeit, die dazu verleitet, einen Service wie Google Fonts einzusetzen. 

Wie es anders geht, hat euch mein Artikel gezeigt. Falls ihr bei der Umsetzung noch weitere Hilfe benötigt, meldet euch gerne bei mir. Auf Wunsch übernehme ich die lokale Einbindung der Webfonts und optimiere in diesem Zusammenhang auch gleich noch die Auslieferung innerhalb von WordPress.