Lokale Google Fonts (Webfonts) für WordPress verwenden

Am 25.05.2018 trat die neue Datenschutz-Grundverordnung  (DSGVO) in Kraft. Damit ändert sich für Sie als Website-Betreiber so einiges. So auch in Bezug auf die Webfonts von Google, die Sie in Ihrer WordPress-Installation benutzen.

Dieser Artikel stellt keine Rechtsberatung zum Thema Datenschutz dar, und erhebt auch keinen Anspruch darauf, vollständig zu sein. Vielmehr möchten wir Ihnen zeigen, wie Sie Webfonts schnell und einfach in Ihre Website einbinden, ohne die Google Fonts von den Google Servern abzurufen.

Wie so oft gibt es natürlich mehrere Wege zum Ziel. Wir möchten Ihnen gerne einen davon vorstellen.

Viele kostenlose und kommerzielle WordPress-Themes benutzen die Google Fonts als Feature zur typografischen Gestaltung Ihrer WordPress-Website. Für Sie als Anwender ist die einfache Einbindung und die Qualität dieser Fonts eine feine Sache. Das „Problem“ dieser Schriftarten in Verbindung mit der nun geltenden DSGVO liegt an der externen Verfügbarkeit über die Google Server.

Google Fonts und der Datenschutz

Bei jedem Aufruf Ihrer WordPress-Website werden die Google Fonts, die nicht lokal eingebunden sind, direkt von den Google Servern geladen. Dabei werden unter anderem folgende Daten an Google übertragen:

  • Name und Version des Browsers
  • Website (Referrer), von der die Google Fonts angefragt wurden
  • Betriebssystem und Bildschirmauflösung
  • IP-Adresse des Benutzers
  • Spracheinstellungen des Browsers

Spätestens bei der Übermittlung der IP-Adresse des zugreifenden Benutzers werden personenbezogene Daten an Google übermittelt und verarbeitet. Nach dem 25.05.2018 müssen Sie Ihren Website-Besuchern in Ihrer Datenschutzerklärung mitteilen, dass – und warum – Sie personenbezogene Daten an Google übermitteln, um die Website mit schicken Schriften zu präsentieren.

Doch Sie können mit einem einfachen Trick die Übermittlung der Daten an Google verhindern, indem Sie die verwendeten Webfonts direkt von Ihrer Domain abrufen. Somit umgehen Sie die Google Server und verbessern unter Umständen noch die Ladezeiten Ihrer Website.

Lokale Google Fonts für WordPress benutzen: Die Vorbereitungen

Mit fünf einfachen Schritten bereiten Sie Ihre Website auf die Nutzung von lokalen Webfonts vor.

  • Wählen Sie die gewünschte Schriftart mit Hilfe des google-webfonts-helper
  • Wählen Sie die gewünschten Schriftstile, indem Sie die Kästchen anklicken (Mehrfachauswahl möglich)
  • Passen Sie den Pfad an (z.B. /wp-content/fonts/)
  • Kopieren Sie den CSS-Schnipsel und speichern Sie ihn in einer Textdatei mit dem Namen franklin.css auf Ihrer Festplatte.
google-webfonts-helper in der Übersicht
  • Laden Sie die benötigten Dateien herunter und entpacken Sie das ZIP-Archiv in einen Ordner mit dem Namen fonts auf Ihrem lokalen PC
google-webfonts-helper local

WordPress mit zusätzlichem CSS-Code für Google Fonts erweitern

  • Laden Sie den Ordner „fonts“ in den beim google-webfonts-helper angegebenen Pfad auf Ihren Webspace hoch. In diesem Beispiel ist das der Pfad /wp-content/fonts
  • Prüfen Sie in Ihrem WordPress-Theme, wo Sie eigene CSS-Einstellungen angeben können. Für dieses Beispiel sieht das benutzerdefinierte CSS folgendermaßen aus und kann direkt über den Customizer hinzugefügt werden
/* libre-franklin-900 - latin */
@font-face {
font-family: 'Libre Franklin';
font-style: normal;
font-weight: 900;
src: url('/wp-content/fonts/libre-franklin-v2-latin-900.eot'); /* IE9 Compat Modes */
src: local('Libre Franklin Black'), local('LibreFranklin-Black'),
url('/wp-content/fonts/libre-franklin-v2-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/wp-content/fonts/libre-franklin-v2-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
url('/wp-content/fonts/libre-franklin-v2-latin-900.woff') format('woff'), /* Modern Browsers */
url('/wp-content/fonts/libre-franklin-v2-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
url('/wp-content/fonts/libre-franklin-v2-latin-900.svg#LibreFranklin') format('svg'); /* Legacy iOS */
}
/* libre-franklin-900italic - latin */
@font-face {
font-family: 'Libre Franklin';
font-style: italic;
font-weight: 900;
src: url('/wp-content/fonts/libre-franklin-v2-latin-900italic.eot'); /* IE9 Compat Modes */
src: local('Libre Franklin Black Italic'), local('LibreFranklin-BlackItalic'),
url('/wp-content/fonts/libre-franklin-v2-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/wp-content/fonts/libre-franklin-v2-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
url('/wp-content/fonts/libre-franklin-v2-latin-900italic.woff') format('woff'), /* Modern Browsers */
url('/wp-content/fonts/libre-franklin-v2-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('/wp-content/fonts/libre-franklin-v2-latin-900italic.svg#LibreFranklin') format('svg'); /* Legacy iOS */
}
  • Fügen Sie den CSS-Schnipsel aus Ihrer zuvor gespeicherten Datei franklin.css im WordPress Backend über Design > Customizer > Zusätzliches CSS ein
WordPress Customizer

Seit WordPress-Version 4.7 ist die Funktionalität Zusätzliches CSS bereits im WordPress-Core enthalten. Daher sollte heutzutage jedes moderne WordPress-Theme diese Funktion unterstützen. Wenn Ihr WordPress-Theme kein zusätzliches CSS erlaubt, dann können Sie diese Funktion zum Beispiel über das folgende Plugin nachrüsten: WP Add Custom CSS

Diese Nachrüstung funktioniert im Übrigen auch mit all unseren Managed WordPress-Installationen.

Um Ihre Änderungen zu überprüfen, können Sie beispielsweise die Entwicklertools des Google-Chrome-Browsers nutzen. Dort sehen Sie, dass die Schrift Libre Franklin nicht mehr von Google, sondern von Ihrer Domain geladen wird:

Google Fonds Local ./. Über Google geladen

Dieser Artikel wurde am 24 Sep 2018 von sebastian.zientek als Teil des Topics WordPress erstellt.

Diskutieren Sie mit!