Google Fonts verstehen und lokal einbinden
Google Fonts ist eine Sammlung von über 1.000 kostenlosen Schriftarten und Icons, die von Google zur Verfügung gestellt werden. Sie können von Webdesignern und Entwicklern genutzt werden, um ihren Websites eine ästhetisch ansprechende und individuelle Typografie zu verleihen. Google hostet die Schriftarten prinzipiell auf seinen eigenen Servern – allerdings sollten die Schriftarten bestenfalls lokal auf Website-Servern eingebunden werden, ohne sich auf Googles externes Angebot zu verlassen: So lassen sich Datenschutz und die Einhaltung der DSGVO-Richtlinien garantieren.
Was sind Google Fonts?
Die Google Schriftarten werden Webdesignern von Google in einer Online-Bibliothek zur freien Nutzung bereitgestellt und sind Teil des Google Fonts-Projekts. In seinem Google Fonts FAQ erklärt der Anbieter explizit, dass alle Schriften unter die Open Font-Lizenz fallen und für jede Text-Art von Websites und Logos über Schulbücher zu Schmuckgravuren kostenlos verwendet werden dürfen.
Die Google Font Library umfasst eine große Zahl diverser Schriftstile von verschiedenen Designern in über 1.500 Schriftfamilien, darunter serifenlose Schriften, serifenbetonte Schriften, Handschriften, Display-Schriften und viele mehr. Darüber hinaus unterstützt Google Fonts aktuell 135 Sprachen und eine breite Palette von Zeichensätzen, wie z. B. die koreanischen, japanischen und chinesischen Schreibsysteme, um die Bedürfnisse von Websites weltweit zu erfüllen.
Neben Schriftarten bietet die Fonts Bibliothek auch eine große Auswahl an Icons, die kostenlos heruntergeladen und auf Websites verwendet werden dürfen.
Die beliebtesten Google Fonts Schriftarten
Das Ziel von Google Fonts ist es, hochwertige Schriftarten für alle zugänglich zu machen und die Gestaltung von Websites langfristig zu verbessern. Hierzu bietet Google im Knowledge-Blog des Fonts-Projekts eine Vielzahl an Ratgebern, z. B. zur Auswahl visuell harmonischer Typografie und zur technischen Einbindung von Schriftarten, aber auch zur historischen Entwicklung von Schriften.
Warum sind Google Fonts so beliebt?
Google Fonts sind beliebt wegen ihrer Vielseitigkeit und Zugänglichkeit. Die wichtigsten Vorteile umfassen:
- Open Source
- Einfache Integration
- Optimiert für das Web mit schnellen Ladezeiten und verbesserter Webperformance
- Breite Palette von Stilen und Kategorien.
- Kompatibilität mit allen modernen Browsern und Betriebssystemen
- Regelmäßige Updates und neue Schriftarten
Varianten zur Verwendung von Google Fonts?
Google Fonts können Websites durch verschiedene Integrationsmethoden bereichern. Diese Varianten stehen dir für die Einbindung der Fonts zur Verfügung:
- Einbindung der Fonts von den Google Servern
- Einbindung der Fonts mit selbst gehosteten Dateien
- Verwendung der Google Fonts API
- Nutzung von Website-Erweiterungen wie Google Fonts Plugins
Einbindung der Fonts von den Google Servern
Die direkte Nutzung von Google Fonts über den Server von Google ist die einfachste Methode zur Integration. Hierbei wird ein kleiner Code-Schnipsel im <head>-Bereich der Website eingebunden, der auf die Schriftartdateien verweist, die Google hostet. Diese Methode bietet schnelle Ladezeiten, da die Fonts über das Content Delivery Network (CDN) von Google bereitgestellt werden. Allerdings gibt es hierbei Datenschutzbedenken: Durch das Laden der Schriftdateien von Google-Servern können Nutzerdaten wie IP-Adressen an Google übermittelt werden, was in einigen Regionen, wie der EU, datenschutzrechtliche Probleme verursachen kann.
Einbindung der Fonts mit selbst gehosteten Dateien
Um Datenschutzrichtlinien wie die DSGVO einzuhalten, kann es sinnvoll sein, Google Fonts lokal auf dem eigenen Server zu hosten. Hierbei werden die gewünschten Schriftarten zunächst von Google Fonts heruntergeladen und auf dem eigenen Server gespeichert. Anschließend bindet man sie per CSS in die Website ein. Diese Methode stellt sicher, dass keine Daten an Google übertragen werden, da die Schriftarten direkt vom eigenen Server geladen werden. So lässt sich die volle Kontrolle über die Datennutzung behalten und die Website bleibt konform mit gängigen Datenschutzvorgaben.
Verwendung der Google Fonts API
Die Google Fonts API (Application Programming Interface) ist eine Programmierschnittstelle, die es Webdesignern und Entwicklern ermöglicht, mit wenig Aufwand auf Schriftarten zuzugreifen, die von Google gehostet werden. Dies gelingt, indem auf ein Stylesheet zugegriffen wird, das Google selbst bereits definiert hat. Hier ein Beispiel für HTML-Code, in dem die Schriftart Roboto für einen Titel verwendet wird:
<title>Google Fonts Beispiel</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
Nutzung von Website-Erweiterungen wie Google Fonts Plugins
Programmierschnittstelle, die es Webdesignern und Entwicklern ermöglicht, mit wenig Aufwand auf Schriftarten zuzugreifen, die von Google gehostet werden. Dies gelingt, indem auf ein Stylesheet zugegriffen wird, das Google selbst bereits definiert hat. Hier ein Beispiel für HTML-Code, in dem die Schriftart Roboto für einen Titel verwendet wird:
Plugins für CMS wie WordPress erleichtern die Integration von Google Fonts in Websites: Sie stellen eine benutzerfreundliche Schnittstelle, über die Webdesigner und Entwickler Schriftarten aus der Google Fonts-Bibliothek auswählen können, ohne den HTML- oder CSS-Code manuell zu bearbeiten. Durch die Plugins wird die Schriftartverknüpfung in den Quellcode integriert, ohne dass die Nutzer den HTML- oder CSS-Code manuell bearbeiten müssen. Die Plugins stellen also keine zusätzlichen Steuerelemente für die Gestaltung bereit, sondern sorgen lediglich für die Verknüpfung, sodass die ausgewählten Google Fonts auf der Website geladen werden können. Dies erleichtert die Verwendung von Google Fonts für Webdesigner und Entwickler, ohne dass umfangreiche Codierungskenntnisse erforderlich sind.
Google Fonts Datenschutzproblematik
Bedenken bezüglich der Datensicherheit bei Google Fonts beziehen sich hauptsächlich auf die potenzielle Übertragung von Nutzerdaten an Google beim Laden der Schriftarten von den Servern des Unternehmens. Da die Schriftarten von Google Fonts über externe Server bereitgestellt werden, können Informationen wie IP-Adressen, Browserdetails und Nutzerverhalten an Google übertragen werden.
Wenn ein Nutzer eine Website besucht, die Google Fonts verwendet, wäre dies je nach Hosting nicht DSGVO-konform. Außerdem könnte Google Cookies setzen oder Daten für Tracking-Zwecke sammeln, während die Schriftarten geladen werden. Einige Datenschutzbehörden und Datenschutzaktivisten haben deshalb Bedenken hinsichtlich der potenziellen Überwachung und Profilbildung von Nutzern geäußert, die durch die Verwendung von Google Fonts auftreten können.
Google selbst streitet diese Datenschutzlücke zwar mittlerweile ab, Kritiker sind allerdings nach wie vor davon überzeugt, extern gehostete Google Fonts seien nicht DSGVO-konform.
Lokales Google Fonts Hosting
Das lokale Einbinden von Google Fonts, auch bekannt als “lokales Hosting”, bietet Webseitenbetreibern eine alternative Methode zur Bereitstellung von Schriftarten auf ihren Websites. Anstatt die Schriftarten direkt von den Servern von Google zu laden, werden die Schriftarten heruntergeladen und auf dem eigenen Webserver gehostet. Google Fonts lokal einzubinden ermöglicht eine verbesserte Kontrolle über die Verfügbarkeit und Ladezeiten der Schriftarten, da sie nicht von externen Servern abhängig sind: So sind eine höhere Datensicherheit und kürzere Ladezeiten möglich, die sich positiv auf das SEO-Ranking und die Besucherzufriedenheit auswirken können.
Vor- und Nachteile lokalen Hostings
Die Entscheidung, Google Fonts lokal zu hosten, birgt sowohl Vor- als auch Nachteile. Lokales Hosting ermöglicht gegenüber der Nutzung von Googles Servern eine verbesserte Kontrolle über Datenschutz und Ladezeiten, geht jedoch mit zusätzlicher technischer Komplexität und Verantwortung einher.
Google Fonts lokal einbinden: Vorteile
- Datenschutz: Lokales Hosting von Google Fonts gibt Website-Betreibern Kontrolle über die Datenübertragung.
- Verbesserte Ladezeiten: Lokal gehostete Google Fonts können schneller geladen werden, da sie direkt von den eigenen Webservern der Website abgerufen werden, ohne auf externe Server zugreifen zu müssen. Dies kann die Ladezeiten der Website insgesamt verbessern und die Benutzererfahrung optimieren.
- Reduzierte Abhängigkeit von externen Anbietern: Durch das lokale Hosting der Schriftarten wird die Abhängigkeit von externen Anbietern wie Google reduziert. Dies bedeutet, dass die Website weniger anfällig für Ausfälle oder Veränderungen seitens des externen Anbieters ist.
Google Fonts lokal einbinden: Nachteile
- Technische Komplexität: Das lokale Hosting von Google Fonts erfordert zusätzliche technische Kenntnisse und Aufwand, um die Schriftarten herunterzuladen, auf dem eigenen Webserver zu hosten und in den Quellcode der Website einzubinden. Dies kann für weniger technisch versierte Website-Betreiber eine Hürde darstellen.
- Aktualisierungen selbst verwalten: Bei lokalem Hosting müssen Website-Betreiber auch die Aktualisierung und Wartung der gehosteten Schriftarten verwalten. Dies beinhaltet das regelmäßige Überprüfen auf Updates und das Aktualisieren der Schriftarten auf dem eigenen Server, um sicherzustellen, dass die neuesten Versionen verwendet werden.
So lassen sich Google Fonts mit Tools lokal einbinden
Für die lokale Einbindung von Google Fonts gibt es spezialisierte Tools wie Webfontshelper, welches die Schriftarten herunterlädt und den Code zur Integration bereitstellt. Auch WordPress-Plugins wie Use Any Font, OMGF oder Local Google Fonts ermöglichen das Speichern der Fonts auf dem eigenen Server, um Datenschutzrisiken zu minimieren. Dies verhindert die Übertragung von Nutzerdaten an Google-Server und sichert die DSGVO-Konformität. Themes wie Divi und Elementor ermöglichen ebenfalls die lokale Einbindung, sind jedoch keine eigenständigen Tools.
Achtung: Das beliebte WordPress Plugin Yoast SEObietet leider keine Funktion zum lokalen Hosting oder zur Optimierung der Nutzung von Google Fonts an.
Google Fonts DSGVO-konform einbinden mit Code
Um Google Fonts DSGVO-konform auf einer Webseite zu verwenden, ist es wichtig, dass die Schriftarten lokal gehostet werden. Dies kann auch über entsprechende Verweise im Code der CSS-Datei erfolgen. Die Einbindung funktioniert wie folgt:
- Identifizieren der genutzten Google Fonts: Zuerst wird ermittelt, welche Google Fonts das Theme verwendet.
- Verhindern des Ladens der externen Fonts: Um das Laden der Schriftarten von Google-Servern zu stoppen, wird der folgende PHP-Code in die functions.php des Child-Themes eingefügt:
add_filter('style_loader_src', function($href) {
if(strpos($href, "//fonts.googleapis.com/") === false) {
return $href;
}
return false;
});
- Überprüfen des Quellcodes: Der Quellcode der Webseite wird daraufhin überprüft, ob keine Links mehr zu fonts.googleapis.com existieren.
- Suchenachder ID des verlinkten Fonts: Sollten Links noch vorhanden sein, wird nach der spezifischen ID des verlinkten Fonts im Theme gesucht.
- Entfernen der externen Font-Links: Der Code des Themes wird so angepasst, dass die externen Fonts nicht mehr geladen werden, indem die ID in den oben genannten Code integriert wird.
Google Fonts auf barrierefreien Website einbinden
Beim Einbinden von Google Fonts auf barrierefreien Websites ist es wichtig, Schriftarten zu wählen, die klare Unterscheidungen zwischen Buchstaben wie ‘I’ und ‘l’ sowie ‘O’ und ‘0’ bieten, um die Lesbarkeit zu verbessern. Größere Schriftgrade und ein ausreichender Zeilenabstand sind ebenfalls entscheidend. Zudem sollten die Farbkontraste den p>Hier kommt die WCAG-Richtlinien
entsprechen, um Texte für Nutzer mit Sehbehinderungen zugänglicher zu machen. Die Auswahl der Schriftart sollte auch kulturelle Inklusivität berücksichtigen, indem sie mehrere Sprachunterstützungen und Schriftsysteme anbietet.Beim Einbinden von Google Fonts auf barrierefreien Websites ist es wichtig, Schriftarten zu wählen, die klare Unterscheidungen zwischen Buchstaben wie ‘I’ und ‘l’ sowie ‘O’ und ‘0’ bieten, um die Lesbarkeit zu verbessern. Größere Schriftgrade und ein ausreichender Zeilenabstand sind ebenfalls entscheidend. Zudem sollten die Farbkontraste den <a href=”https://www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/gesetze-und-richtlinien/wcag/wcag-artikel.html”>WCAG-Richtlinien</a> entsprechen, um Texte für Nutzer mit Sehbehinderungen zugänglicher zu machen. Die Auswahl der Schriftart sollte auch kulturelle Inklusivität berücksichtigen, indem sie mehrere Sprachunterstützungen und Schriftsysteme anbietet.
Google Fonts: die richtige Schriftart für eine Website finden
Die Auswahl der richtigen Schriftart kann zum Erfolg einer Website beitragen, denn sie prägt nicht nur das visuelle Erscheinungsbild, sondern beeinflusst auch die Benutzererfahrung und Zugänglichkeit. Google Fonts bietet eine breite Palette an Optionen, die es dem Nutzer ermöglichen, genau die richtige Typografie für jede Website zu finden.
Bei der Auswahl einer Google Font für Websites sollten das Corporate Design und der Zweck der Seite berücksichtigt werden, damit die Schrift zum Markenauftritt passt. Die Lesbarkeit auf verschiedenen Geräten, die Kombinierbarkeit mit anderen Fonts sowie das Testen und Einholen von Feedback sind ebenfalls entscheidend für die optimale Auswahl.
Fazit
Google Fonts bietet eine kostenlose, umfangreiche Sammlung von Schriftarten, die das Design von Websites bereichern können. Aufgrund datenschutzrechtlicher Bedenken, insbesondere im Hinblick auf die DSGVO, empfiehlt sich jedoch das lokale Hosting der Fonts.
Profi-Tipp:
Nutze Tools wie Webfontshelper zur lokalen Einbindung – sie vereinfachen den Prozess, verbessern die Ladezeiten, und bieten eine benutzerfreundliche Möglichkeit, DSGVO-konform zu bleiben.
