DSGVO Update: Nutzung von Google-Fonts auf deiner Webseite

Google-Fonts lokal und DSGVO-konform einbinden und verwenden (DIVI-Anleitung)

google fonts einbinden mit divi featured

GOOGLE FONTS & DIE DSGVO

Du hast es vielleicht schon mitbekommen – das große Drama um die Nutzung von Google Fonts auf deiner Webseite und die DSGVO (bzw. den Verstoß gegen diese….)

Aber um was geht es hier genau?

Die meisten WordPress Themes & PageBuilder (wie bspw. DIVI oder Elementor) stellen von Haus aus automatisch eine Verbindung zu den Google Fonts Servern her.

Auf diesen Servern befinden sich zahlreiche kostenlose Schriftarten, welche ganz bequem über einen Code auf deiner Website eingebunden werden können.

Aus DSGVO-Sicht, war diese automatische Integration schon immer fragwürdig und seit Januar 2022 gibt es sogar ein Gerichtsurteil, welches das ungefragte Einbinden der Google Fonts Server komplett untersagt.

Damit einhergehend ist auch wieder einmal eine große Zahl an Abmahnschreiben unterwegs.

Daher stehllst du besser sicher, dass deine Webseite die Google Fonts nicht ungefragt herunterlädt und verwendet, sondern diese rechtskonform nutzt.

Aber WIE fragst du dich vielleicht?

In der Konsequenz bedeutet das, dass du die Fonts lokal hosten (einbinden) und die Verbindung zu Google verhindern solltest.

In diesem kleinen Tutorial für das DIVI – WordPress Theme zeigen wir dir,

U

wie du erkennst, ob deine Website eine Verbindung zu Google aufbaut

wenn ja, was du tun musst, um diese Verbindung zu Google zu verhindern

wie du deine Google Fonts lokal einbindest (Divi-Anleitung)

Verwendete Ressourcen

WordPress

DIVI

VIDEO Tutorial auf YouTube : Google Fonts mit dem Divi Theme lokal einbinden

Im nachfolgenden Video zeigen wir dir im Detail, wie du bei Nutzung des Divi-Themes die Google Fonts lokal auf deinem Server einbindest und somit die Verbindung zu den Google Servern verhinderst.

Alle genauen Codes sowie eine Schritt-für-Schritt Anleitung findest du auch nochmal nach dem Video in diesem Blogpost übersichtlich zusammengefasst.

CSS Code für das lokale Einbinden der Google Fonts

Füge diesen kleinen Code in das Feld „zusätzliches CSS“, wie im Video gezeigt, ein. Vergiss nicht Namen und Dateinamen an deine tatsächlich hochgeladene Schriftart anzupassen.

css


@font-face {
font-family: 'Open Sans';
src: url('/wp-content/uploads/et-fonts/OpenSans-VariableFont-wght.ttf') format('truetype');
font-style: normal;
font-display: fallback;
}

Mit dieser kleinen Anleitung, sollte es dir gelingen, deine Fonts auf deiner Webseite lokal einzubinden.

Wenn du dennoch Schwierigkeiten damit haben solltest, schreib uns gern in den Kommentaren.

Und hier nochmal alle Schritte einzeln zum nachlesen

netzwerk mit google fonts

Schritt 1: Festellen, ob eine Verbindung zu den Goggle Fonts Servern aufgebaut wird

  • Mache einen Rechtsklick auf deiner Seite und klicke „Untersuchen/Inspect“
  • Die Entwicklertools öffnen sich … Suche nach dem Tab „Netzwerk“
  • Lade die Seite neu
  • Schau in den einzelnen Einträgen nach Verbindungen zu „fonts.gstatic.com“

Wenn du keine dieser Einträge finden kannst, Glückwunsch, du bist schon fertig, zumindest für diese Unterseite (dazu mehr am Ende). Wenn doch, dann geht es mit dem nächsten Schritt weiter.

divi google schriftart deaktivieren

Schritt 2: Google Fonts in den DIVI Einstellungen deaktivieren

  • Gehe zurück in dein WordPress-Backend
  • Klicke auf Divi -> Theme-Optionen
  • Suche den Punkt „Google-Schriftarten verwenden“
  • Deaktiviere den entsprechenden Schalter

Dieser Schritt unterbindet, dass dein DIVI Theme irgendwelche Google Schriftarten herunter lädt. Allerdings kannst du jetzt auch keine dieser Fonts mehr verwenden. Wenn du jetzt Schritt 1 wiederholst, sollte der „fonts.gstatic.com“ Eintrag verschwunden sein.

google schriftart herunterladen

Schritt 3: Wuschschriftart bei Google herunterladen

  • Gehe auf https://fonts.google.com/
  • Suche dir eine Schriftart die dir gefällt
  • Lade dir diese Schriftart auf deinen Computer herunter

Auf https://fonts.google.com/ findest du alle Schriftarten, welche von Google zur Verfügung gestellt werden und das Glücklicherweise kostenlos. Bei allen anderen Schriftarten muss du besonders vorsichtig sein, dass du auch eine entsprechende Lizenz zum einbinden auf deiner Webseite besitzt.

google schriftart hochladen

Schritt 4: Wunschschriftart auf deine Seite hochladen

  • Gehe auf eine beliebige Seite oder Blogpost auf deiner Page
  • Aktiviere den Visuellen Builder
  • Suche dir ein Textfeld, oder füge ein neues ein
  • In den Text Einstellungen wechselst du auf den Punkt Design
  • Unter Text -> Text Schriftart, kannst du jetzt deine, bei Goggle heruntergeladene, Datei hochladen
  • Wähle einen Namen, die Datei und die entsprechenden Schriftstärken für deine Schriftart aus

Leider gibt es für diesen Schritt in DIVI keine zentrale Stelle, welche alle hochgeladenen Schriftarten verwaltet. Du musst also diesen kleinen Umweg über den Divi Builder nehmen, um eine eigene Schriftart einzubinden.

standardfont einstellen

Schritt 5: Neue Schriftart als Standard festlegen

  • Gehe zurück ins Webseiten-Backend
  • Klicke auf Design -> Customizer
  • Hier kannst du jetzt unter Allgemeine Einstellungen -> Typographie, deine neu hochgeladene Schriftart als Standard festlegen
  • Klicke auf „veröffentlichen“ um deine Einstellung zu speichern

Mit dieser Einstellung, verwendet DIVI jetzt für jedes, von dir verwendete Modul, deine neu hochgeladene Schriftart. Wenn du auch mal eine abweichende Schriftart verwenden möchtest, dann musst du diese im jeweiligen Modul separat einstellen.

font face settings

Schritt 6: Hochgeladenen Font auch auf nicht DIVI Builder Seiten verfügbar machen

  • Gehe in Backend deiner Webseite
  • Klicke auf Divi -> Theme-Optionen
  • Rolle hier ganz nach unten bis zum Feld „Eigene CSS“
  • Füge hier den Code-Schnipsel von weiter oben in diesem Blogpost ein
  • Passe diesen auf deine hochgeladene Schriftart an
    (font-family = Name, src = Speicherort und Dateiname)
  • Einstellung speichern … fertig

Wenn du mit den Hausmitteln von DIVI eine Schriftart hochlädst, dann ist diese nur für Seite verfügbar, welche auch mit dem Divi Builder gebaut wurden. Alle anderen, wie z.B. diverse Archiv-Seiten, können nicht auf diesen Font zugreifen. Um das zu beheben, musst du die Schriftart nochmal global „definieren“.

Mit dieser Schritt-für-Schritt Anleitung, solltest du in der Lage sein, Google Fonts mit Divi auf deiner Webseite lokal einzubinden.

Aber Achtung: Diese Anleitung verhindert nur die Einbindung von Google Fonts durch das WordPress Theme DIVI. Je nachdem, welche Plugins auf deiner Seite installiert sind und welche externen Services eventuell eingebunden sind (z.B. Newsletter-Anmeldeformulare), können auch weiterhin Google Fonts heruntergeladen werden. Um ganz sicher zu gehen, solltest du jede deiner Seiten überprüfen, oder einen externen Scanner drüber laufen lassen (z.B. den Scanner von www.ccm19.de). Dieser Scanner durchsucht eure komplette Webseite, ob nicht doch irgendwo ungefragt Google Fonts von externen Servern eingebunden werden.

Solltest du auf Schwierigkeiten stoßen oder Fragen haben, lass gerne einen Kommentar da.

who we are

Wir sind Berit & Martin und wir sind deine LAUNCHLOTSEN! 🚀

Wir haben ganz viel Leidenschaft für unsere Arbeit mit motivierten Unternehmern wie dir, sowie jahrelange Erfahrung und zwei helle Köpfchen – vollgepackt mit Wissen über Business Strategy, Branding, Technik , Web-Development und Marketing – um gemeinsam mit dir dein Herzensprojekt zum Leben zu erwecken und so richtig durchzustarten.

Auf los geht's los - bist du bereit?

Martin

Martin

Frontend | Backend | Programmierung

Submit a Comment

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