Google-Fonts datenschutz-konform einbinden

Wenn man auf einer Website Google-Fonts benutzt, ist es eine gute Idee, die Fonts nicht über den Google-Server zu laden, sondern lokal einzubinden. Das ist datenschutzkonform, weil damit die Schriften nicht bei jedem Aufruf nach Hause telefonieren.

Für diese Aufgabe kann man ein Plugin einsetzen. Im Plugin-Verzeichnis gibt es einige Plugins, die Google-Fonts herunterladen: Dieses hier oder das hier.

Ich persönlich finde ein Plugin nicht so richtig praktisch. Es gibt zu viele Fälle, bei denen die Einbindung aus unbekannten Gründen nicht klappt und dann geht’s irgendwie nicht weiter.

Es ist aber relativ einfach, die Schriften direkt über das CSS einzubinden. Dafür gibt es praktische Helfer-Tools. Ich habe lange den Webfont-Generator von fontsquirrel.com genutzt. Der wäre auch nach wie vor meine erste Wahl, wenn es um freie Schriften geht, die nicht von Google stammen.

Für Google-Fonts habe ich inzwischen google-webfonts-helper.herokuapp.com für mich entdeckt. Damit geht es super schnell, die Site bereitet alles fix und fertig vor.

Google-Font einbinden in 4 Schritten

  1. Font auf google-webfonts-helper.herokuapp.com aussuchen
  2. Schrift-Dateien herunterladen, zip-Archiv entpacken
  3. Im Theme-Verzeichnis ein Verzeichnis ‚fonts‘ anlegen und die Schriftdateien da reinkopieren – nur die Dateien, nicht die Verzeichnisse
  4. CSS-Schnipsel (Beispiel siehe unten) in die style.css eintragen.
  5. Fertig!

Hier ein Beispiel für die Schrift „Noto sans“.

/* noto-sans-regular - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/noto-sans-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans'), local('NotoSans'),
       url('./fonts/noto-sans-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/noto-sans-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/noto-sans-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/noto-sans-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/noto-sans-v9-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
}

Die Schriften kannst du dann so einem Element zuweisen:

p {font-family 'Noto Sans';}

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

4 Kommentare zu “Google-Fonts datenschutz-konform einbinden

  • Danke einfache Lösung.
    Leider haben bei mir Plugins wie OMGF selten funktioniert. Zu viele Schriftarten kommen aus verschiedenen Plugins (Pagebuilder) dort lassen sie sich nicht deaktvieren.

  • Hallo Kirsten,

    wie kommst du denn darauf, dass Google-Fonts „bei jedem Aufruf nach Hause telefonieren“? Es ist m. E. überhaupt kein Problem, die bei Google gehosteten Schriften zu nutzen – ein entsprechender Hinweis in der Datenschutzerklärung sollte reichen.

    Google sagt in seinen FAQs zu Google Fonts u. a.:

    „Use of Google Fonts is unauthenticated. No cookies are sent by website visitors to the Google Fonts API. Requests to the Google Fonts API are made to resource-specific domains, such as fonts.googleapis.com or fonts.gstatic.com. […] In order to serve fonts quickly and efficiently with the fewest requests, responses are cached by the browser […] Requests for CSS assets are cached for 1 day […] The font files are cached for 1 year, which cumulatively has the effect of making the entire web faster: When millions of websites all link to the same fonts, they are cached after visiting the first website and appear instantly on all other subsequently visited sites. […] We only see 1 CSS request per font family, per day, per browser.“

    Q: https://developers.google.com/fonts/faq2?hl=de

    • Hallo, Thomas,
      Google ist bekannt dafür, so wenig Informationen wie möglich über ihre technischen Prozesse offen zu legen. Ich halte die Aussagen aus den FAQs daher für nicht sooo belastbar.

      Requests auf externe Server sind immer lästig. Und Server, die in den USA liegen, sind datenschutzrechtlich ein Problem.
      Bei jeder Anfrage werden Daten übertragen, das geht technisch nicht anders.

      Services wie Google Fonts sind Produkte – und Produkte kosten immer was. There is no free lunch ;)

      Kirsten

Die Kommentare sind geschlossen.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.