Google Fonts – kostenlose Fonts für die eigene Website
Google bietet die Option an, verschiedene Schriftarten auf der eigenen Webseite zu nutzen, ohne diese zuvor auf den eigenen Server hochladen zu müssen. Das ist praktisch. Die Schriftarten werden einfach nachgeladen, sodass du dir Platz auf dem eigenen Server sparst.
Damit Google die Schriftarten zur Verfügung stellen kann, lädt deine Website mit jedem Seitenbesuch automatisch die Schriften über einen Server von Google aus den USA und Google liest dann zahlreiche Daten von Websitebesuchern aus. Dazu zählen:
- der Browser
- die benutze Website
- das Betriebssystem
- die IP-Adresse
- die Spracheinstellung
- und die Bildschirmauflösung
Die IP-Adresse ermöglicht es Google, den Standort des Websitebesuchers zu lokalisieren. Dabei handelt es sich um personenbezogene Daten. Websitebesitzer dürfen diese Daten nicht ohne Zustimmung von Besuchern erheben und an Google weiterleiten. Das ist der springende Punkt!
Google Fonts lokal einbinden ist deshalb sinnvoll! Nachdem die DSGVO (Datenschutz-Grundverordnung) seit 25. Mai 2018 gültig ist, muss jeder Webdesigner, oder Agentur, die Google Fonts datenschutzkonform in die eigene Website einbinden.
Darum musst du aktiv werden und deine Google Fonts lokal einbinden, also über deinen Server laden lassen. Das bedeutet im Klartext: Die Schriften deiner Webseite werden nicht mehr über den Google Server geladen, sondern du lädst deine Schriften auf deine eigene Website hoch. Dann kann Google keine Daten mehr abgreifen und das ist DSGVO-konform. Oder du verwendest ein Cookie-Plugin und holst dir die Zustimmung!
Ich verwende Real Cookie-Banner Pro und bin damit auf der sicheren Seite! Trotzdem habe ich die Schriften lokal gespeichert.
Hier kannst du das Cookie-Banner kaufen und bekommst, mit dem Gutscheincode: Webdesign-lernen-online, 20 % auf die erste Jahresrechnung!
Real-Cookie-Banner kaufen* (Dieser Link ist ein Affiliate-Link.)
Google Fonts lokal einbinden – so machst du es
In dieser Anleitung zeige ich dir, wie du deine Google Fonts lokalisierst, dann lokal einbindest und das externe Laden der Google Schriftarten verhinderst.
Jedes WordPress-Theme hat verschiedene Einstellungen, was das Laden von Fonts angeht. Alle Themes und ihre Vorgehensweise hier zu beschreiben, würde den Beitrag sprengen und ist somit nicht möglich. Aber mit meiner Anleitung sollten gut 90–95 % aller Fälle abgedeckt sein.
Schritt 1: Herausfinden, welche Google Fonts du lädst
Das ist der erste Schritt. Meistens werden Schriften über ein Theme eingebunden. Hier findest du die eingebundenen Schriften in den Einstellungen des Themes, oder über den Customizer des jeweiligen Themes. Du kommst zu den Einstellungen über deine WordPress-Seitenleiste im Backend: Design → Customizer
Hier kannst du wie im Beispiel des Themes OceanWP deine Einstellungen unter Typografie vornehmen.
Ich persönlich arbeite mit dem besten und professionellstem Theme was erhältlich ist: Thrive Theme Builder* in Verbindung mit Thrive Architect.* Hier brauchst du nur einen Haken setzen und die Google Fonts werden nicht mehr geladen. Ganz einfach.
Die Orte, unter denen sich die Schrifteinstellungen verbergen, sind von Theme zu Theme unterschiedlich. Der beste Weg ist es, die Schriften mit der Entwicklerkonsole von Chrome oder Firefox zu lokalisieren.
Dazu machst du auf deiner Website einen Rechtsklick und gehst auf »Untersuchen«. Die Entwicklerkonsole öffnet sich und unter Netzwerkanalyse → Schriften erscheinen die Fonts, die du aktuell lädst. Bei Chrome ist die Einstellung unter »Netzwerk → Schriftart« zu finden.
Wenn du nun auf eine der Schriftarten klickst, siehst du rechts angezeigt, wo sich die Schriftart befindet, von wo sie geladen wird. Hast du sie auf deinem eigenen Server hochgeladen, steht da immer deine Domain und der Upload-Ordner. Bsp.: deine-domain.de/uploads/schriftart.woff. Wird sie extern geladen über einen Google-Server, musst du das unterbinden!
Ich selbst benutze übrigens das Plugin Real Cookie Banner um externe Skripte und Cookies aufzufinden und rechtskonform einzubinden. Es ist das beste auf dem Markt (du bemerkst das ich immer die besten Sachen nutze, es lohnt sich einfach und bringt im Endeffekt mehr Geld ein ;-)), und am einfachsten einzurichten, bei gleichzeitig fairem Preis.
Wenn du es auch nutzen willst, kannst du im ersten Jahr sogar 20 % Rabatt bekommen, wenn du es unter diesem Link bestellst und als Gutscheincode folgenden Code eingibst: Link: Real Cookie Banner* (Gutscheincode= Webdesign-lernen-online). Genauso wie es hier steht! Natürlich kannst du damit keine Google Fonts genehmigen lassen, schützt dich aber vor einer Abmahnung und erheblichen Kosten, weshalb ich das Plugin hier vollständiger weise zum Thema passend erwähne.
In meinem Beispiel sind die Schriften schon per Plugin eingebunden:
Im Grunde gibt es drei Optionen, wo du deine Google Fonts findest:
- Unter Design, Grundeinstellungen oder Typografie
- Bei einem Menüpunkt
- oder unter Design → Customizer
Schritt 2: Deine eigenen Fonts herunterladen
Jetzt wo du weißt welche Fonts du nutzt, kannst du sie herunterladen, um sie auf deiner eigenen Website einzubinden. Dazu gehst du auf folgende Website: Google Webfonts Helper
Dort wählst du links oben deine Schriftart aus, setzt den Haken für die benötigten Schriftschnitte und scrollst nach unten zu dem blauen Button für den Download. Wenn sie heruntergeladen sind, entpackst du die Zip-Datei und kannst die Schriften nun hochladen. Vorher solltest du unter Punkt 3 noch den Pfad anpassen, wo deine Schriften liegen werden.
Schritt 3: Google Fonts auf deinen Server hochladen und einbinden
Nun gibt es zwei Wege, die Schriften einzubinden:
- Per CSS
- Mittels eines Plugins
Ich bevorzuge die Einbindung mittels Plugins. Dazu installiere ich das Plugin Custom Fonts, das du hier herunterladen kannst: Custom Fonts
Wenn du es installiert hast, kannst du unter Design → Custom Fonts die Schriften hochladen und in deinem Theme die Einstellungen treffen.
Das Plugin ist super und tut sehr gute Dienste. Zudem ist es auch kostenlos.
Ich nutze Thrive Theme Builder* und kann dort danach sehr einfach die Einstellungen vornehmen. Das ist sehr bequem. 🙂 Hatte ich schon erwähnt, dass es der beste Theme-Builder auf dem Markt für WordPress ist? Hatte ich und werde es immer wieder tun, so begeistert bin ich davon.
Schritt 4: Schriften mit CSS einbinden
Der andere Weg ist über die Einbindung mittels deiner CSS-Datei. Dazu passt du wie schon erwähnt den Pfad bei Google Webfonts Helper unter Schritt 3 an, kopierst den Code und fügst ihn in deine CSS-Datei (style.css) ein. Achte darauf, dass du ein Child-Theme benutzt, damit die Daten nicht bei einem Update des Themes überschrieben werden!
Dann benutzt du dein FTP-Programm und lädst die Schriften in den Ordner, den du dafür erstellt, oder ausgewählt hast. Dann musst du die Schriften nur noch in deinem Theme einstellen und anpassen. Danach musst du die Verbindung zu Google Fonts unterbinden.
Schritt 5: Google Fonts deaktivieren
Das geht am einfachsten, indem du ein Plugin benutzt. Dafür gibt es zwei, die ich nutzen würde:
Die Plugins brauchst du nur installieren und aktivieren.
Oder du benutzt ein Snippet, das du in die funktions.php deines Child-Themes einfügst:
function removeGoogleFonts(){
global $wp_styles;
$regex = '/fonts\.googleapis\.com\/css\?family/i';
foreach($wp_styles->registered as $registered) {
if( preg_match($regex, $registered->src) ) {
wp_dequeue_style($registered->handle);
}
}
}
add_action('wp_enqueue_scripts', 'removeGoogleFonts', 999);Das sollte bei den meisten Themes funktionieren. Es geht auf jeden Fall bei: Divi, BeTheme und dem Standard-Theme von WordPress.
Schritt 6: Danach prüfen, ob die Fonts lokal geladen werden
Dazu gehst du wie schon beschrieben in die Entwicklerkonsole deines Browsers und prüfst dort, ob die Fonts lokal geladen werden. Achte auch darauf, dass du vorher den Cache deines Browsers löscht, damit die aktuelle CSS-Datei geladen wird.
Fazit
Leider sind wir als Webmaster dazu gezwungen, die Schriften DSGVO-konform einzubinden. Allerdings ist, Google Fonts lokal einbinden auch nicht wirklich schwer und sollte jedem gelingen.
Viele nutzen deshalb, und aus Gründen der Performance, nur noch die Systemschriften. Allerdings sehen die nicht unbedingt gut aus und schaden dem Ansehen deiner Website. Um die Ladegeschwindigkeit deiner Website nicht allzu sehr zu verschlechtern, achte darauf, dass die Schriften nicht allzu viele Kilobyte in Anspruch nehmen.
Weiterführendes zu Google Fonts lokal einbinden
Abmahnungen wegen fehlerhafter Einbindung von Google Fonts
Nach dem Urteil des LG München I, indem die Nutzung von Google Fonts widerrechtlich ist, begann eine Abmahnwelle, die sich an Websitebetreiber wendet, in denen angeblich betroffene Webseitenbesucher Schadensersatzansprüche gegenüber Webseitenbetreibern geltend machen und oft zweifelhafter Natur sind.
Auffällig sind auftretende Grammatik- und Rechtschreibfehler und bestärken die Vermutung, dass hier nur versucht wird schnelles Geld zu machen.
Wenn du ein solches Schreiben erhalten hast, gehe wie folgt vor:
- Prüfe zunächst, ob Google Fonts remote oder lokal eingebunden sind
- Ist der Dienst remote eingebunden, suche nach Alternativen und binde die Google Fonts, mithilfe meiner Anleitung, lokal in deine Webseiten ein
- Sind die Google Fonts bereits lokal eingebunden, dann ist der Vorwurf innerhalb der Mail unbegründet. Antworte in diesem Fall entweder gar nicht auf die Mail, oder verweise in einer Antwort darauf, dass eine Remote-Einbindung nicht stattfindet und keine Verbindung zu Google aufgebaut wird.
Solltest du trotz der Möglichkeit der lokalen Möglichkeit, weiterhin die Remote-Einbindung von Google Fonts betreiben und die IP-Adressen von Besuchern weiter an Google übermitteln, sind nicht nur Unterlassungserklärungen, sondern möglicherweise auch ein Ordnungsgeld von bis zu 250.000 Euro zu befürchten. Das ist nicht unerheblich und sollte dich zum Handeln bringen!
FAQs zu Google Fonts lokal einbinden
Ist die lokale Nutzung von Google Fonts legal?
Google gestattet die kommerzielle Nutzung seiner Schriften auf allen Websites. Google empfiehlt die Schriften für Websites von seinen eigenen Servern zu laden, jedoch aus Performance-Gründen. Eine lokale Nutzung wird an dieser Stelle nicht ausgeschlossen.
Weiterhin erlaubt Google sogar ausdrücklich den Download und die Nutzung seiner Schriften auf eigenen Systemen.
Hier sei noch erwähnt, dass ich kein Anwalt bin und das hier keine Rechtsberatung darstellt!
Woher weiß ich, ob ich Google Fonts verwende?
Prüfe deine Website mit dem Google Fonts Scanner. Gib dazu einfach den Link deiner Website ein und drücke auf „Jetzt Website prüfen“. Der Scanner prüft deine Website anschließend, ob Google Fonts rechtskonform eingebunden sind. Hier ist der Link dazu: Google Fonts Scanner
Anmerkung: Die Links in diesem Artikel, die mit einem Sternchen* gekennzeichnet sind, sind Affiliate-Links.
