Gute Schrift ist zentral für den Erfolg eines Projekts

Eine passende Schrift auf einer Website erfüllt mehrere wichtige Funktionen: Sie sorgt für eine klare Lesbarkeit und erleichtert die Aufnahme von Informationen, auch bei längeren Texten. Durch ihren Stil trägt sie zur visuellen Identität der Website bei und unterstützt deren Markenbotschaft.

Eine gut gewählte Schrift lenkt die Aufmerksamkeit und setzt gezielt Schwerpunkte, zum Beispiel bei Überschriften oder Call-to-Action-Elementen. Zudem verbessert sie die Barrierefreiheit, indem sie konsistent wirkt und gut mit anderen Designelementen harmoniert. Zu guter Letzt optimiert die passende Schrift auch die Barrierefreiheit, indem sie auf verschiedenen Geräten und Bildschirmgrößen lesbar bleibt.

Google Fonts: vielfältige und komfortable Schriftsammlung

Seit vielen Jahren bietet Google mit Google Fonts einen kostenlosen Dienst, der viele Schriften beherbergt. Dort haben Sie die Möglichkeit, die passende Schrift für Ihr Projekt auszusuchen. Aber nicht nur das: Google Fonts bietet Ihnen auch die komfortable Möglichkeit, mit wenigen Zeilen HTML-Code die ausgesuchte Schrift in Ihr Webprojekt einzubinden:

<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

Wenn Sie den oberen Code innerhalb von … Ihres Webprojektes einbinden, dann wird beim Aufruf der Website automatisch die Schrift Noto Sans von Google Fonts geladen. Das ist sehr praktisch, birgt aber Nachteile. Es ist eher empfehlenswert, die Schrift lokal vom eigenen Server zu laden.

Warum Sie Google Fonts lieber lokal laden sollten

Google Fonts lokal auf dem eigenen Server zu hosten, anstatt von Google-Servern zu laden, hat mehrere Vorteile. Ein wichtiger Vorteil ist die Einhaltung des Datenschutzes. Wer auf eigener Website die Schriften von Google-Servern und nicht aus dem eigenen Webspace lädt, verstößt gegen die DSGVO (Datenschutz-Grundverordnung), weil dabei unter anderem die IP-Adressen der Personen, die die betroffene Website aufrufen, an Google übertragen werden. Einen solchen Verstoß hat das Urteil des LG München bestätigt.

Dass die Problematik mit der Verwendung der Google Fonts ernst ist, können Sie daran erkennen, dass auch WordPress.org empfiehlt, bei der Erstellung von Themes die Google-Schriften lokal zu hosten und nicht von externen Servern zu laden.

Sofern Sie Plugins und Themes einsetzen, die Google Fonts lokal installieren, müssen Sie nichts weiter machen. Kommt aber bei Ihnen ein Theme oder Plugin zum Einsatz, welches die Schriften von Google-Servern lädt, dann sollten Sie aktiv werden und sich die folgende Anleitung durchlesen.

Lokale Google Fonts sind nicht immer trivial

Die Herausforderung beim lokalen Hosten von Google Fonts ist, dass Sie unter Umständen dem eingesetzten Theme und den Plugins zunächst “abgewöhnen” müssen, die Schriften von Google zu laden.

Im Prinzip geht das auch ohne Einsatz eines Plugins, erfordert aber einiges an Verständnis für die Code-Ebene von WordPress. Um bei der Nutzung von Google Fonts die Verbindung zu den Google-Servern zu entfernen, ist daher ein Plugin die deutlich komfortablere Methode. Wir beschreiben Ihnen eine einfache Methode, da sie wenige Arbeitsschritte benötigt und daher auch für Personen mit wenig Erfahrung geeignet ist.

Google Fonts lokal: die komfortable Plugin-Lösung

Das offizielle Verzeichnis von WordPress bietet auch für dieses Problem mit Google Fonts eine passende Erweiterung an. Das Plugin mit dem langen Namen OMGF | GDPR/DSGVO Compliant, Faster Google Fonts. Easy. erspart Ihnen Nerven, Mühe und Arbeit. Dieses Plugin übernimmt für Sie den kompletten Prozess: Es identifiziert die von Google Fonts geladenen Schriften, entfernt sie aus den betroffenen Abschnitten und Dateien und ersetzt sie durch lokale Varianten.

Nach der Installation und der Aktivierung des Plugins finden Sie die Funktionen von OMGF im Adminbereich von WordPress unter "Einstellungen" → "Optimize Google Fonts". In diesem Abschnitt wird Ihnen angezeigt, ob Schriften von Google geladen werden. Falls dies der Fall ist, wird Ihnen detailliert angezeigt, wie Sie vorgehen müssen.

Bedenken Sie bitte, dass die Wege, um Google Fonts auch unabsichtlich einzuschleusen, vielfältig sind. Weder das Plugin noch andere Lösungen können alle Szenarien abdecken. Der Entwickler des OMGF-Plugins listet einige Problemfälle auf. Empfehlenswert ist, die Implementierung der Lösung hinterher gut zu kontrollieren.

Fragen und Antworten

Wie erkenne ich, ob meine WordPress Website Fonts von Google lädt?

Um zu erkennen, ob Ihr WordPress Fonts von Google-Servern lädt, stehen Ihnen mindestens zwei Wege zur Verfügung:

Weg 1: Seitenquelltext im Browser

• Seitenquelltext anzeigen: Drücken Sie Strg+U (Windows) oder Cmd+U (Mac).
• Nach Google Fonts suchen: Drücken Sie Strg+F und suchen Sie nach "fonts.googleapis" oder "fonts.gstatic".
• Wenn entsprechende Links gefunden werden, werden die Website Fonts von Google-Servern geladen.

Weg 2: Online-Tools einsetzen

Online-Tools, wie der fontchecker.de, können Ihre Website scannen und überprüfen, ob Fonts von Google-Servern geladen werden.

Was ist der Unterschied zwischen Fonts, Schriften und Schriftarten?

In der Praxis werden die Begriffe Schriften, Schriftarten und Fonts sehr häufig als Synonyme verwendet. Diese Verwendung ist an sich nicht falsch, wenn Sie allerdings die Feinheiten erkennen möchten, dann gibt es diese Unterschiede:

• Font: In der englischsprachigen Typografie bezeichnet "font" eine spezifische Variante eines Schriftsatzes. Sie umfasst die Kombination aus Schriftart, Schrägschrift (Italic), Fettdruck (Bold), Größe etc. Zum Beispiel könnte "Arial Bold 12px" ein spezifischer Font sein. In der deutschen Sprache wird Font häufig als "Schrift" oder "Schriftart" übersetzt, wenn man die genaue Variante meint.
• Schrift: Dies ist ein allgemeiner Begriff und kann sowohl eine Schriftfamilie (wie "Arial" oder "Verdana") als auch eine spezifische Variante (wie "Arial Bold") umfassen. "Schrift" wird oft verwendet, um die physische oder digitale Erscheinung von Text zu beschreiben, einschließlich aller Varianten innerhalb einer Schriftfamilie.
• Schriftart (Typeface): "Schriftart" ist der deutsche Begriff, der am engsten dem englischen "typeface" entspricht. Eine Schriftart ist eine Sammlung von Schriftzeichen, die einen bestimmten Stil teilen, aber verschiedene Gewichte, Breiten und Schrägschriften umfassen können. So ist "Garamond" eine Schriftart, die verschiedene Fonts wie "Garamond Regular", "Garamond Italic" und "Garamond Bold" umfasst.

Was kann die Pro-Version vom Plugin OMGF?

Für den Dauereinsatz ist die kostenpflichtige Pro-Version (ab 19,00 €) sinnvoll. Sie verbessert die Performance beim Einbinden und Laden der Schriften und bringt einige zusätzliche Funktionen mit. Dazu gehören die @import-Statements und die Möglichkeit, nicht nur die Schriften, sondern auch die Material-Icons lokal zu laden.

Gibt es Alternativen zu Google Fonts?

Google Fonts ist nicht der einzige Dienst, der Schriften listet und hostet. Neben Google bieten unter anderem auch Adobe Fonts und Font Squirrel unzählige Schriften an. Allerdings sind nicht alle Dienste kostenlos.

Der Autor: Vladimir Simović

Vladimir Simović setzt seit 2000 mit HTML & CSS und seit 2004 mit WordPress Website-Projekte um. Seit jeher teilt er sein Wissen mit der Community und hat als einer der ersten Blogger im deutschsprachigen Raum zu den WordPress Anfängen Tipps und Tricks veröffentlicht. Seit 2022 ist er als Redakteur für STRATO tätig und verfasst Informationsartikel insbesondere zu WordPress und Hosting-Themen. Im Laufe der Jahre hat er Fachbücher sowie über 60 Fachartikel publiziert und weit über hundert WordPress Projekte betreut.

Noch kein Hosting für WordPress? Passende Angebote