DSGVO Update: Nutzung von Google-Fonts auf deiner Webseite

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

google fonts einbinden mit elementor 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 Elementor und das Hello – 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 (Elementor-Anleitung)

Verwendete Ressourcen

WordPress

Elementor mit dem Hello Theme

m

Plugin – File Manager Advanced

VIDEO Tutorial auf YouTube : Google Fonts mit Elementor lokal einbinden

Im nachfolgenden Video zeigen wir dir im Detail, wie du bei Nutzung des Hello-Themes und Elementor 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

Dieser kleine PHP Code-Schnipsel kommt in deine functions.php und sorgt dafür, dass von Elementor keine Google Fonts mehr von extern geladen werden.

php


add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

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: 'Sarpanch';
src: url('/wp-content/uploads/fonts/Sarpanch-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

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.

elementor disable google fonts

Schritt 2: Google Fonts per functions.php deaktivieren

  • Gehe zurück in dein WordPress-Backend
  • Klicke auf Design -> Theme-Datei-Editor
  • Suche auf der rechten Seite nach der Datei functions.php und klicke drauf
  • Kopiere hier den Code von weiter oben rein
  • Klicke auf „Datei aktualisieren“

Dieser Schritt unterbindet, dass dein Hello Theme und Elementor 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.

font upload file manager

Schritt 4: Wunschschriftart auf deine Seite hochladen

  • Installiere dir ein Filemanager-Plugin z.B. den Advanced File Manager
  • Klicke auf den Menüpunkt „File Manager“
  • Suche in der angezeigten Ordnerstruktur nach wp-content -> uploads
  • Lege dir einen Ordner für deine Font-Datei an
  • Lade deine heruntergeladene Schriftart-Datei in diesen Ordner hoch

Sei vorsichtig welches Plugin du installiertst und verwendest. Filemanager sind besonders für Hacks geeignet, da sie bereits vollen Zugang zu deinem Serve-Dateisystem haben.

Diesen Schritt kannst du auch ohne Plugin durchführen. Gehe dazu in das Backend deines Hostinganbieters und lade die Datei über den dortigen Filemanager hoch.

zusaetzliches css

Schritt 6: Hochgeladenen Font für Elementor verfügbar machen

  • Gehe in Backend deiner Webseite
  • Klicke auf Design -> Customizer
  • Rolle hier ganz nach unten bis zum Feld „Zusätzliches 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)
  • Veröffentlichen … fertig

Wenn du jetzt auf deine Seite zurückkehrst, sollte der Text wieder korrekt angezeigt werden.

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

Aber Achtung: Diese Anleitung verhindert nur die Einbindung von Google Fonts durch das WordPress Theme Hello mit Elementor. 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 deine 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