Dank Google Webfonts sind die Zeiten vorbei, in denen man Texte auf der eigenen Website nur mit Arial oder Verdana darstellen konnte.
Hunderte Schriftarten stellt Google kostenlos bereit, die man auf der eigenen Website nutzen kann, doch dabei gibt es mittlerweile ein Problem beim Datenschutz.
Was genau das Problem ist und wie du Google Webfonts datenschutzgerecht in deinem Webdesign nutzen kannst, erfährst du im Folgenden.
Google Webfonts nutzen
Mit den Google Webfonts (zur Website) hat der Suchmaschinen-Riese ein interessantes Angebot an den Start gebracht. Hier finden sich über 1.000 Schriftarten, die auf Websites genutzt werden können.
Diese sind in die Kategorien Serif, Sans Serif, Display, Handwriting und Monospace untergliedert und werten das eigene Webdesign auf jeden Fall auf.
Ich nutze meist Sans Serif Schriften auf meinen Websites, aber je nach Wunsch und Thema kann man natürlich auch andere Schrift-Typen nutzen.
Man kann auf der Google Webfonts Website auch direkt in die jeweiligen Textfelder bei den einzelnen Schriften klicken und eigenen Text eingeben. Auf diese Weise kann man noch besser beurteilen, ob diese Schriftart zur eigenen Website passt.
Ich finde diese Auswahl toll, tue mich aber auch schwer damit, mich bei einer neuen Website für eine Schriftart zu entscheiden. Manchmal hilft es die vorhandenen Filter zu nutzen. So kann man die Schriftarten z.B. nach ihrer Popularität sortieren, aber auch Filter wie “Dicke” (Thickness) oder “Breite” (Width) nutzen.
Hat man sich für eine oder mehrere Schriftarten der Google Webfonts entschieden, dann bekommt man einen kleinen HTML-Code, den man in die eigene Website einbaut. Dann kann man die Schriftart auch schon auf der eigenen Website nutzen.
Datenschutzprobleme vermeiden!
Viele fertige WordPress-Themes und Webdesign-Vorlagen haben Google Fonts bereits integriert.
Doch Achtung: Auch wenn die Einbindung der Google Webfonts über die Google-Server elegant und einfach ist, so bringt dies Probleme mit der DSGVO mit. Durch diese Einbindung findet eine Übermittlung der IP des Website-Besuchers an Google statt.
Ob hier eine aktive Zustimmung (Opt-In) notwendig ist oder nicht, ist noch nicht ganz geklärt, aber im Zweifel muss der Besucher zumindest eine Opt-Out Möglichkeit haben. Doch das würde bedeuten, dass die Website für manche Nutzer mit den Google Webfonts angezeigt wird und für andere mit den Standard-Schriftarten von Windows bzw. anderen Endgeräten. Das “zerschießt” meist das Layout.
Dann kann man doch lieber gleich die Google-Server außen vor lassen und die Google Webfonts lokal einbinden.
Bevor man das macht, sollte man die über den Google-Server eingebundenen Webfonts aber aus der Website entfernen. Das kann man z.B. direkt im jeweils genutzen Theme machen, auch wenn das nicht ganz so einfach ist.
Bequemer geschieht dies mit dem Plugin Autoptimize, welches eine Option anbietet, Google Fonts aus der Website zu entfernen. Das hat zumindest bei mir bisher immer gut funktioniert.
Alternativ gibt es auch noch andere WordPress-Plugins, die dafür vorgesehen sind.
Google Webfonts lokal einbinden
Aber wir wollen ja weiterhin die Google Webfonts nutzen, weshalb wir sie lokal einbinden.
Dafür gehen wir einfach auf diese Website. Dort findet man alle Google Webfonts und sucht sich die gewünschten raus.
In 4 Schritten kann man diese dann lokal in der eigenen Website einbinden:
- Charsets auswählen
Das Charset umfasst verschiedene Schriftzeichen-Sätze, wie z.B. “greek”, “cyrillic” oder “vietnamese”.
Für uns reicht in der Regel das Chartset “latin”.
- Stil auswählen
Viele Schriftarten bringen unterschiedliche Stile mit. Die Schriftart “Roboto” bietet zum Beispiel eine ganze Reihe an.
Hier sollte man nur die Stile auswählen, die man wirklich benötigt, denn mit jedem zusätzlichen Stil wird die Font-Datei größer und das beeinträchtigt die Ladezeit und hat negativen Einfluss auf die neuen wichtigen Google Core Web Vitals.
- CSS kopieren
Das Tool gibt dann anschließend den passenden CSS-Code aus, um diese Schriftarten samt der Stile in die eigene Website einzubinden.
Diesen Code kann man z.B. sehr einfach mit dem WordPress-Plugin Simple CSS einbinden.
Hier seht ihr ein Beispiel von meiner neuesten Website.
- Schrift-Datei herunterladen
Zu guter Letzt müssen wir die Schrift selbst noch herunterladen. Diese wird in 5 verschiedenen Font-Formaten zum Download bereitgestellt.
Diese Datei entpackt man dann und lädt die Font-Dateien in das Verzeichnis “fonts” auf dem eigenem Webspace hoch. Dieses muss direkt im Root des eigenen Webspace neu erstellt werden.
Und das war es auch schon. Nun kann man wie gewohnt die Google-Schriftart in der eigenen Website nutzen und es ist kein Aufruf der Google Server mehr notwendig.
Per CSS kann man z.B. Überschriften so mit einem Google Webfont versehen:
h1, h2, h3, h4, h5, h6 {
font-family: "Oswald", Arial, sans serif;
}
Welche Google Webfonts nutzt ihr?
Zu den Google Webfonts kommt von mir nochmal ein separater Artikel, da man doch eine Menge beachten sollte. So kann es z.B. Probleme mit dem sogeannten FOUT-Effekt (Flash of unstyled text) geben.
Generell sollte man es zudem nicht übertreiben. 1-2 Google Webfonts sind auf einer Website völlig ausreichend. Ihr solltet viel ausprobieren, um wirklich eine passende Schriftart für eure Website zu finden, euch dann aber auf 1-2 beschränken.
Und dann solltet ihr diese auch konsequent nutzen und z.B. Überschriften, Widgets und den Blog-Namen damit ausstatten. Mehr dazu aber wie gesagt in einem zukünftigen Artikel.
Welche Google Webfonts nutzt ihr auf eurer Website?
Oder nutzt ihr gar keine?
Wer wir sind und wie wir arbeiten. In unserem Büro im Zentrum von Köln arbeiten gegenwärtig sieben ausgebildete Redakteur/innen an der Ausarbeitung erstklassiger Inhalte, auf die du dich verlassen kannst. Sämtliche Artikel werden nach dem Vier-Augen-Prinzip publiziert: Nach Fertigstellung der Rohfassung werden die Texte von (mindestens) einem/r anderen Redakteur/in auf orthografische und inhaltliche Richtigkeit hin überprüft.
Diese Seite ist ein Angebot der 4pub GmbH mit Sitz in Köln. Wir haben uns auf den Betrieb hochwertiger redaktioneller Online-Portale spezialisiert und berichten stets redaktionell unabhängig.
- Danke für 16 tolle Jahre - 13. Juli 2023
- So erstellst du deine erste Newsletter-Mail in 10 Schritten mit CleverReach - 13. Juli 2023
- Die 5 besten Features des Amazon Affiliate WordPress Plugin – AAWP - 12. Juli 2023
Hi Peer,
mal eine Frage: Wenn ich die google Fonts nicht lokal einbinde und jemand lässt mich deswegen abmahnen, müsste er das ja beweisen. Wie soll denn jemand so etwas in der Praxis beweisen?
VG Manuel
Wenn man es nicht direkt im Code deiner Website sieht, kann man es mittels der Enwickler-Tools in den Browsern sehr gut sehen, auf welche Server eine Website zugreift,
Das geht kinderleicht. Ich sehe bei dir auf deiner Website beispielsweise auch, dass du neben den Google Fonts auch Google Analytics und das Shortpixel CDN nutzt.
Hallo Peer,
zu Punkt 4) noch eine kurze Ergänzung:
Der Ordner fonts sollte bei Übernahme des CSS (das relativ gesetzt ist) nicht im Root der WordPress Installation sondern im Ordner themes abgelegt sein .
Der Ordner Fonts sollte im ThemeOrdner abgelegt werden. Dieses ist nicht etwa der Ordner des ChildThema sondern der Hauptordern der Themes (normalerweise wp-content/themes/).
Alternativ kann natürlich der relative Pfad ( ../fonts/ ) auch auf den absoluten Pfad (hier Punkt example.de/fonts/ wie bei dir unter Punkt 3 ersetzt werden). Mglw. macht dieses ja auch direkt das Plugin Simple CSS.
Ich wollte nur darauf hinweisen, da ich bei meinen Update (siehe https://www.andreas-unkelbach.de/blog/?go=show&id=1015 ) auch erst den Ordner an der falschen Stelle hochgeladen hatte und dann verwundert war, dass die Google Fonts nicht korrekt eingebunden waren.
Auf meiner eigenen Seite nutze ich keine Google Fonts habe aber über Fontello – Icons als Webfonts eingebunden (siehe https://www.andreas-unkelbach.de/blog/?go=show&id=412 ) und hier auch durch das lokale Hosting keine Einschränkungen festgestellt.
Viele Grüße
Andreas