Lokale Google Fonts (Webfonts) für WordPress verwenden

Am 25.05.2018 tritt 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 bald 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.

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

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

  1. 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.
  2. 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 */
    }
  3. Fügen Sie den CSS-Schnipsel aus Ihrer zuvor gespeicherten Datei franklin.css im WordPress Backend über Design > Customizer > Zusätzliches CSS ein.

    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.

Diesen Beitrag bewerten:

16 Gedanken zu „Lokale Google Fonts (Webfonts) für WordPress verwenden

  1. nk sagt:

    und wie lösche ich die Verbindung zum Googlefontserver? Dei ist ja trotzdem noch da.

  2. Gabi sagt:

    Super erklärt. Ich habe alles genauso gemacht und eingefügt ( das ging sogar mit meiner Managed WordPress Version). Nun habe ich aber entdeckt, das wenn ich den Seitenquelltext ansehe das hier noch zu sehen ist:

    Meine Frage dazu, das kann ich dank meiner Version selber nicht löschen oder? Wenn ja wie mache ich das via Managed WordPress. Gibt es dazu ein Plug in das die Google Links zum Schweigen bringt?
    Vielen Dank

  3. Gabi sagt:

    kleiner Nachtrag:

    Failed to load resource: the server responded with a status of 404 ()……………… xxxx/xxxxx .de/wp-content/fonts/arizonia-v8-latin-regular.ttf
    Das wird mir bei Google angezeigt 😉 komisch, die Webseitenurl stimmt ect. habe alles nach Anleitung gemacht und hatte auch geklappt 🙂

  4. 1und1hilfe sagt:

    Hallo Gabi,

    ich vermute mal dass nach “noch zu sehen ist:” ein HTML-Schnipsel kommen sollte? Bestimmte Elemente werden hier in den Kommentaren aus Sicherheitsgründen nicht dargestellt.

    Wie ich sehe, klappt das lokale Laden der Fonts bei Ihnen bisher noch nicht. Derzeit liefert die Abrage der Schriftarten im Ordner “fonts” einen Fehler 404 (File not found) aus. Grund: Es fehlt der Ornder “fonts” mit den enthaltenen Font-Dateien im Ordner “wp-content”.

    Dieser Punkt scheint noch nicht gemacht worden zu sein:

    “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.”

    Bei Managed WordPress (der Artikel ist nicht konkret darauf gemünzt, sondern erklärt dies allgemein) finden Sie diesen Pfad im App-Ordner Ihrer Installation. Greifen Sie darauf bitte mit dem FTP-Programm Ihrer Wahl zu. Der Pfad sieht dann ungefähr so aus:

    /app123456789/wp-content/

    Der Ordner “fonts” existiert dort noch nicht – diesen müssen Sie zunächst noch auf dem Webspace erstellen bzw. haben diesen bereits auf Ihrem PC bei Schritt 4 bzw. 5 aus dem ZIP-Archiv erhalten. Laden Sie den Ordner “fonts” mit allen Inhalten in den Ordner “wp-content” und folgen Sie dann den weiteren Punkten in der Anleitung.

    Danke und Gruß
    Michael, 1&1

  5. Gabi sagt:

    Hallo Michael,

    Danke für die schnelle Antwort.
    Der Ordner Fonts ist bereits bei mir im wp-content Folder enthalten + die Schriftarten. Ich vermute das ich im CSS evtl. vor dem Pfad /wp-content/fonts. noch dieses /appxxx/ setzen muss. Ich probiere das mal aus 🙂 kann ja im Prinzip nicht mehr viel fehlen. Lieben Dank für die Unterstützung.

    Liebe Grüße

    1. 1und1hilfe sagt:

      Hallo Gabi,

      als ich heute morgen nachgeschaut hatte, existierte der benötigte Ordner “fonts” bei Ihnen noch nicht. Wenn das jetzt der Fall ist, sollte es klappen 🙂

      Grüße
      Michael, 1&1

      1. Gabi sagt:

        Hallo Michael,

        ich hatte ihn via online Webspace erstellt. Das später aber nochmal mit Filezilla gemacht. Ich glaub das hat WP dann besser geschmeckt 🙂 Jetzt funktioniert alles wie es soll. Dankeschön

  6. Sonja sagt:

    Hallo,
    leider klappt das mit dem Einbinden der Fonts auf dem Server bei mir auch nicht.
    Ich habe mehrfach alles nachkontrolliert, kann aber keinen Fehler erkennen.

    Ich habe jedoch den Fonts-Ordner im Unterordner meines Themes angelegt (dafür auch ein Child-Theme erstellt) wie ich es sehr häufig in Beschreibungen im Internet gefunden habe. Im Design-Editor zeigt es mir im Child Theme auch die Schriften an und ich habe eine der Schriften auch im CSS ergänzt. Jedoch weiterhin ohne Erfolg.
    Meine Seite nutzt nun eine Standard-Schrift anstatt meiner gewünschten. Von einer zweiten Schrift für meinen Header mal ganz zu schweigen.

    Vor der Einbindung auf den Server hat die Seite natürlich mehr hergemacht.

    Da dies meine ersten Schritte in WP habe ich mich für die “Managed WP Version” entschieden, ich hoffe mir kann hier jemand weiterhelfen, denn so gefällt mir mein Blog nicht wirklich 😉

    Vielen Dank
    Viele Grüße
    Sonja

    1. 1und1hilfe sagt:

      Hallo Sonja,

      wie ich in den Chrome-Entwicklertools sehe, scheint hier keiner der gewählten Pfade zu passen.

      Der Ordner “fonts” sollte immer innerhalb von “wp-content” liegen. Und wenn Sie ihn schon in den themes-Ordner platzieren, dann sollte dieser imho auch im Ordner des jeweiligen Themes liegen.

      Also entweder

      example.com/wp-content/fonts/

      oder

      example.com/wp-content/themes/$theme-ordner/fonts/

      Bei Ihnen ist der Pfad aktuell aber

      example.com/fonts bzw. example.com/wp-content/themes/fonts/

      Ich bezweifle, dass das so klappen wird. Bitte versuchen Sie es nochmal wie von mir oben angegeben.

      Alternativ sollten Sie einfach die Verwendung der Google Fonts in Ihrer Datenschutzerklärung aufführen.

      Viele Grüße
      Michael, 1&1

  7. Hallo 1+1 Tema, heute sind ja die ersten DGSVO Abmahnungen raus wegen der Google fonts. Ich habe bei 1+1 mangaged WP installationen mit dem Colour mag theme. Keine Ahnung, welche Fonts das theme benutzt. Die oben aufgeführten Anweisungen sind wohl eher was für Programmierer oder free mode Admins. Ich verstehe davon nichts.
    Also was geschieht nun?
    Lg
    florian

    1. 1und1hilfe sagt:

      Hallo Florian,

      ich verweise hier mal auf unsere Twitter-Konversation:

      https://twitter.com/1und1hilfe/status/1003336415478992896

      Nachdem ich nun Ihre Website kenne: Das Theme nutzt externe Google Fonts.

      Viele Grüße
      Michael, 1&1

  8. Astrid sagt:

    Hallo,

    das Installieren hat gut geklappt, die Dateien der beiden Schriftarten sind über FTP hochgeladen und die CSS-Schnipsel im Theme (Dyad) eingegeben.
    Dennoch wird mir bei den Entwickler Tools im Goolge Chrome noch die Verbidung der zu Google angezeigt. Wie kann ich die kappen?

    Viele Grüße,
    Astrid

  9. Astrid sagt:

    Hallo,

    Ich habe nach der o.g. Die Web Fonts übers FTP in dem entsprechenden Ordner importiert.
    Fonts: lato, Novo senif
    Theme: Dyad
    Managed WP

    Allerdings wird mit im Entwicklermodus des Google chrome Browsers immer noch angezeigt, dass die Seite die Fonts von Google lädt (anstatt Lokal). Wie kann ich das unterbinden, dass die Seite die Schriften von Google lädt?

    Viele Grüße,
    Astrid

    1. 1und1hilfe sagt:

      Hallo Astrid,

      1) Stellen Sie bitte unbedingt sicher, dass Sie die Schriftarten (font-family) in ihrem eigenen CSS-Code unbedingt in der Schreibweise angeben, wie Sie auch in der Orginal Style-CSS-Datei (Pfad sollte so aussehen https://example.com/wp-content/themes/dyad/style.css?ver=4.9.6) definiert sind. Also bitte auch Groß-Kleinschreibung des Font-Namens beachten.

      2) Der Pfad zu Ihren lokalen Fonts stimmt noch nicht. Diese sollen derzeit mit example.com/fonts/ geladen werden. Richtig wäre aber ein Ablageort unter example.com/wp-content/fonts/.

      Viele Grüße
      Michael, 1&1

  10. Sabine sagt:

    Hallo,
    ich verwende das WordPress theme Twenty Seventeen. Werden dort google fonts verwendet und wenn ja, wie kann ich als als Laie erkennen, welche es sind.
    Welche Formulierung ist in der Datenschutzerklärung bei Verwendung von google fonts notwendig?

    1. 1und1hilfe sagt:

      Hallo Sabine,

      ja, Twenty Seventeen nutzt Google Web Fonts. Hauptsächlich wohl “Libre Franklin” (https://fonts.googleapis.com/css?family=Libre+Franklin)

      Sie finden im Quelltext Ihrer Website entsprechend hinweise und Links zur fonts.css Datei bei Google.

      Ich kann nicht völlig ausschließen, dass es noch einzelne Komponenten Ihrer Website gibt, die andere Schriftarten verwenden u. auch mit Google Web Fonts arbeiten (z.B. da es Inhalte sind, die per Plugin eingebunden sind). Auch das sollte über den Quelltext Ihrer Seite im Browser erkennbar sein. Suchen Sie dort immer nach den Begriffen “font” oder “fonts”, bzw. auch “css”.

      Welche Formulierung ist in der Datenschutzerklärung bei Verwendung von Google Fonts notwendig?

      Generell ist nicht ganz klar, ob es hinsichtlich Google Web Fonts überhaupt Probleme im Zuge der DSGVO geben kann bzw. wird. Wir empfehlen Ihnen grundsätzlich bzw. sicherheitshalber einen entsprechenden Passus in Ihre Datenschutzerklärung einzufügen. Wie Sie diesen rechtssicher formulieren, können wir Ihnen als Hosting-Unternehmen nicht sagen. Hier müssten Sie sich bei einer entsprechenden Rechtsberatung Tipps einholen.

      Viele Grüße
      Michael, 1&1

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *