So nutzt du Google Fonts richtig – DSGVO-konform und stilvoll

Google Fonts bieten eine Vielzahl attraktiver Schriftarten, die Websites optisch aufwerten können. Doch die direkte Einbindung dieser Schriften von Googles Servern kann datenschutzrechtliche Probleme verursachen. In diesem Artikel erfährst du, wie du Google Fonts korrekt und stilvoll in deine Website integrierst, ohne gegen die Datenschutz-Grundverordnung (DSGVO) zu verstoßen.

Warum die direkte Einbindung von Google Fonts problematisch ist

Datenschutzrechtliche Bedenken

Beim Laden von Google Fonts direkt von den Google-Servern wird die IP-Adresse des Website-Besuchers an Google in die USA übertragen. Dies stellt einen Verstoß gegen die DSGVO dar, da personenbezogene Daten ohne Zustimmung des Nutzers weitergegeben werden. Das Landgericht München I urteilte im Januar 2022, dass diese Praxis rechtswidrig ist. Mehr dazu auf Wikipedia.

Rechtliche Konsequenzen

Webseitenbetreiber, die Google Fonts nicht DSGVO-konform einbinden, riskieren Abmahnungen und Bußgelder. In Deutschland und Österreich wurden bereits zahlreiche Abmahnungen wegen der unerlaubten Weitergabe von IP-Adressen durch die Nutzung von Google Fonts ausgesprochen. Weitere Informationen.

Google Fonts lokal einbinden: Schritt-für-Schritt-Anleitung

Schritt 1: Auswahl und Download der Schriftarten

Besuche die Google Fonts Website und wähle die gewünschten Schriftarten aus. Lade die Schriftarten herunter, indem du auf „Download family“ klickst. Beachte, dass Google die Schriften im TTF-Format bereitstellt, welches für Webanwendungen nicht optimal ist.

Schritt 2: Konvertierung in webfreundliche Formate

Um die heruntergeladenen TTF-Dateien in das für das Web geeignete WOFF2-Format zu konvertieren, kannst du Tools wie den Google Webfonts Helper nutzen. Dieses Tool ermöglicht es dir, die Schriften direkt im WOFF2-Format herunterzuladen und generiert den passenden CSS-Code für die Einbindung.

Schritt 3: Hochladen der Schriftdateien auf den eigenen Server

Erstelle auf deinem Webserver einen Ordner, z.B. „/fonts“, und lade die konvertierten Schriftdateien dort hoch. Achte darauf, die Dateinamen sinnvoll zu benennen, um Verwechslungen zu vermeiden.

Schritt 4: Einbindung der Schriften in das CSS

Füge den vom Google Webfonts Helper generierten @font-face-Code in deine CSS-Datei ein. Achte darauf, den Pfad zu den Schriftdateien korrekt anzugeben. Ein Beispiel:

          @font-face{         font-family: 'Open Sans';        src: url('/fonts/OpenSans-Regular.woff2') format('woff2');        font-weight: 400;        font-style: normal;        font-display: swap;       }      

Verwende anschließend die eingebundene Schriftart in deinem CSS, z.B.:

          body {        font-family: 'Open Sans', sans-serif;      }      

Vorteile der lokalen Einbindung von Google Fonts

Datenschutzkonformität

Durch das lokale Hosten der Schriftarten stellst du sicher, dass keine personenbezogenen Daten an Dritte weitergegeben werden. Dies entspricht den Anforderungen der DSGVO und schützt dich vor möglichen Abmahnungen.

Verbesserte Ladezeiten

Da die Schriftarten direkt von deinem Server geladen werden, können die Ladezeiten deiner Website optimiert werden. Dies führt zu einer besseren Benutzererfahrung und kann sich positiv auf dein Suchmaschinenranking auswirken.

Unabhängigkeit von externen Diensten

Durch das lokale Hosten der Schriften bist du nicht mehr von der Verfügbarkeit externer Server abhängig. Dies erhöht die Stabilität und Zuverlässigkeit deiner Website.

Für eine professionelle Unterstützung bei der DSGVO-konformen Einbindung von Google Fonts und weiteren Webdesign-Fragen stehen wir dir gerne zur Verfügung. Kontaktiere uns für eine individuelle Beratung.

• Wähle die gewünschten Google Fonts aus und lade sie herunter.
• Konvertiere die Schriftdateien in das WOFF2-Format.
• Lade die konvertierten Dateien auf deinen Server hoch.
• Binde die Schriften über @font-face in dein CSS ein.
• Teste deine Website, um sicherzustellen, dass die Schriften korrekt angezeigt werden.