Google Schriften DSGVO-konform nutzen

Mit dieser Anleitung lernst du per Plugin oder Programmierung Google Schriften DSGVO-konform in deinem WordPress-Projekt einzubetten.

Wir haben bei unserem Website-Baukasten und Theme bewusst auf Google Fonts verzichtet, da diese bei normaler Einbettung (über die Google Server) nicht ohne Datenschutzhinweis in einer Website eingebaut werden dürfen und externe Schriften die Ladezeit verschlechtern.

Vorbereitung

Bevor du einer der folgenden zwei Möglichkeiten zur Einbettung der Google Schriften folgst, solltest du eine oder mehrere Google Fonts definiert haben.

Damit deine Schriften ästhetisch harmonieren, solltest du entweder den Empfehlungen von Google oder denen des Blogs Typewolf folgen. Um in Google die sog. „Pairings“ zu finden, klickst du auf den Titel einer Schriftfamilie und scrollst dann auf der Detailseite nach unten.

Screenshot aus Google Fonts

Idealerweise beschränkst du dich dann auf maximal zwei Schriften. Eine Schrift ist nicht eine ganze Familie, sondern von einer Familie ein Gewicht.

Screenshot aus Google Fonts

Sobald du eine Schriftfamilie im Hauptfenster von Google Fonts ausgewählt hast, öffnest du die Familienbearbeitung rechts unten (in meinem Screenshot unter dem dunkelgrau hinterlegten „1 Family Selected“) und wählst unter dem Tab „Customize“ das Schriftgewicht aus, welches du nutzen willst. Google sagt dir praktischerweise rechts von den Tabs, wie groß der Einfluss auf die Ladezeit deiner Seite ist.

Nun hast du zwei Optionen zur Einbettung der Google Fonts in deiner Website:

  • Am einfachsten geht’s mit zwei Google Fonts Plugins.
  • Empfehlenswerter ist die CSS-Programmierung (Kopieren und Einfügen von Code), da diese keine zusätzlichen Plugins erfordert und somit keine Sicherheitsrisiken enthält.

Beide Optionen sind nachfolgend beschrieben.

Google Fonts Plugin

Am einfachsten ist die Einbettung mit dem Plugin „Easy Google Fonts“ möglich:

Nach der Installation kannst du die Schriften im Design / Customizer unter dem Reiter „Google Fonts“ auswählen.

Da das o. g. Plugin noch nicht datenschutzkonform ist, sollte um ein zweites Plugin des gleichen Autors zum lokalen Hosting erweitert werden. Dies erreicht auch bessere Ladezeiten für deine Website:

CSS-Einbettung

Mit ein bisschen Code und dem Tool Google Webfonts Helper lassen sich die von uns vordefinierten Schriftstile und -Familien so umprogrammieren, dass die Google Schriftarten lokal gehostet werden.

Dazu wählst du zunächst – wie aus Google Fonts bekannt – diejenigen Schriften aus, die du in deiner Seite integrieren willst (Nachdem du deine Schriftfamilie in der linken Spalte gefunden und angeklickt hast, wählst du das Gewicht in der Hauptspalte unter „Select styles“):

Screenshot vom google-webfonts-helper

Anschließend änderst du das Verzeichnis-Präfix auf /fonts/ (also ohne den zwei Punkten davor) und lädst dann die Zip-Datei herunter und kopierst den CSS-Code (grau hinterlegt unter „Copy CSS“). Wenn du mehrere Schriften nutzen willst, wiederholst du den Schritt anschließend.

Anschließend entpackst du die Zip-Datei(en) mit den Schriften und öffnest mit einem FTP-Programm deinen Server. Dort gehst du in dein Theme-Verzeichnis unter /wp-content/themes/deintheme/ und kopierst die Dateien aus den ZIP-Ordnern in einen neuen Unterordner namens „fonts“. Das Verzeichnis, in dem dann die Google Schriftarten liegen, hat dann also den Pfad /wp-content/themes/deintheme/fonts/.

Öffne dann die style.css-Datei deines WordPress Themes entweder in WordPress unter Design / Editor oder am besten direkt aus dem FTP bspw. mit dem Dreamweaver.

Dort fügst du dann den CSS-Code ein, den du vom webfonts-helper kopiert hast. Darunter definierst du dann diejenigen Styles oder Schriften, die du mit den Google Fonts versehen willst, wie z. B. für den Fließtext:

html body,
body .site-content .content-area h1 strong {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 400;
}

Für Überschriften wäre die Formatierung demnach:

body .site-content .content-area h1,
body .site-content .content-area h2,
body .site-content .content-area h3 {
    font-family: 'Roboto',Helvetica, Arial, sans-serif;
    font-weight: 600;
}

Wie du an der kommaseparierten Auflistung der Schriften nach der Font-Family erkennen kannst, nennt man zuerst den Namen deiner Google Schrift, wie im CSS Code vom webfonts-helper definiert (Achtung: Dieselben Anführungszeichen verwenden!), danach diejenigen Schriften, auf welche die Browser zurückfallen sollen, falls die Google Schriftarten nicht geladen werden können (sog. „Fallback“). Dann speicherst du nur noch und bist fast fertig.

Übrigens: Falls du bei den Schriften den Zeilenabstand von 1,4 em (em steht für die im Design-Customizer eingestellte Schriftgröße) bspw. auf doppelten Zeilenabstand für Fett-Formatierungen und Überschrift 2-Formatierungen verändern willst, kannst du das über folgende Formatierung vornehmen:

strong, h2 {
    line-height: 2em;
}

Statt dem em lässt sich die Zeilenhöhe aber auch mit Pixeln (px) definieren, wie z. B.:

strong, h2 {
    font-size: 10px;
    line-height: 20px;
}

Datenschutzhinweise

So lange Google Fonts nicht nachweislich lokal gehostet werden, bedarf es immer einer Ergänzung der Datenschutzrichtlinie. Um herauszufinden, ob die Schriftarten noch von Google kommen oder schon von der eigenen Website, empfehlen wir die Prüfung der externen Ressourcen über WebpageTest.org:

Screenshot von Webpage Test der Seite DentaDox

Sobald fonts.googleapis.com im Wasserfall-Diagramm vorkommt, ist ein Datenschutz-Hinweis erforderlich, da auch persönliche Daten der Website-Besucher an den externen Server übertragen werden können. Hier ein Muster:

Google Web Fonts
Diese Seite nutzt zur einheitlichen Darstellung von Schriftarten sogenannte Web Fonts, die von Google bereitgestellt werden. Beim Aufruf einer Seite lädt Ihr Browser die benötigten Web Fonts in Ihren Browser-Cache (den Zwischenspeicher), um Texte und Schriftarten korrekt anzuzeigen. Zu diesem Zweck muss der von Ihnen verwendete Browser Verbindung zu den Servern von Google aufnehmen. Hierdurch erlangt Google Kenntnis darüber, dass über Ihre IP-Adresse unsere Website aufgerufen wurde. Die Nutzung von Google Web Fonts erfolgt im Interesse einer einheitlichen und ansprechenden Darstellung unserer Online-Angebote. Dies stellt ein berechtigtes Interesse im Sinne von Art. 6 Abs. 1 lit. f DSGVO dar. Wenn Ihr Browser Web Fonts nicht unterstützt, wird eine Standardschrift von Ihrem Computer genutzt. Weitere Informationen zu Google Web Fonts finden Sie unter https://developers.google.com/fonts/faq und in der Datenschutzerklärung von Google: https://www.google.com/policies/privacy/.