Inhalt:
Was ist das Problem mit der Verwendung von Google Fonts in Squarespace?
Welche Lösungsmöglichkeiten gibt es, wenn du Google Fonts in Squarespace verwenden willst?
Wie bindest du Google Fonts DSGVO-konform in Squarespace ein?
Was ist, wenn ich nur Adobe Fonts auf meiner Squarespace Website verwende?
TROUBLESHOOTING: Du hast alles gemacht, was da oben steht und deine Website ist bei der Prüfung immer noch rot. Dann schaue, ob du hier fündig wirst.
Was soll das alles?
Einer Schul-Website aus Bayern haben wir diesen Artikel zu verdanken.
Ich wurde im Auftrag der Schule kontaktiert, weil sie folgendes Problem hatten:
Obwohl auf der Website keine Google Fonts verwendet wurden, sah man bei einem Check, dass eine Verbindung zum Google Server hergestellt wird. Und damit eine Datenübertragung an Dritte stattfindet.
Das ist ein Problem.
Denn laut dem Urteil vom LG München vom 19.01.2022 ist es rechtswidrig, wenn Google Fonts vom Google Server geladen werden, weil dabei angeblich die IP Adresse der Nutzer:innen übertragen wird. Eine IP Adresse zählt zu persönlichen Daten und darf deshalb ohne Zustimmung nicht mit Dritten geteilt werden.
Eine Lösung ist, gar keine Google Fonts zu verwenden. Was ja auf der genannten Website offensichtlich der Fall war. Warum beim Check trotzdem ein Problem aufgepoppt ist und wie ich es gelöst habe, findest du auch in diesem Artikel.
Wenn du aber Google Fonts nutzen willst, ist die gängige Lösung, die verwendeten Schriftarten lokal zu speichern, damit sie nicht vom Google Server geladen werden müssen.
Wie das auf Squarespace 7.0 und 7.1 funktioniert, beschreibe ich ausführlich in diesem Artikel.
Bitte beachte, dass dieser Artikel nur der Information dient und keine Rechtsberatung ist. Ich bin ja auch keine Anwältin. Ich möchte gerne, dass du als als Webseitenbetreiber:in weißt, worauf zu achten ist und dir die technischen Möglichkeiten erklären.
Hier kannst du deine eigene Website überprüfen: Google Fonts Checker
Wenn das Ergebnis grün ist, brauchst du gar nicht weiterlesen. Dann ist alles okay.
Wenn das Ergebnis rot ist, kannst du mit Hilfe dieses Artikels wieder grün werden. Wenn du es nicht selbst machen willst oder kannst, schreib mir einfach. Ich helfe dir gerne.
Ready?
Dann lass uns mal eintauchen.
Was sind Google Fonts?
Google Fonts sind Schriften von verschiedenen Designerinnen und Designern, die Google unter https://fonts.google.com kostenlos zur Verfügung stellt. Diese Sammlung von über 1400 Schriften ist eine beliebte Ressource für Unternehmen, ihren Webauftritt personalisierter und ansprechender zu gestalten.
Google Fonts können in vielen verschiedenen Programmen wie Microsoft Word, Adobe Photoshop oder in Canva, und eben auch auf Webseiten verwendet werden. Das macht den Einsatz von diesen Schriftarten natürlich sehr attraktiv, weil wir sie über unterschiedliche Anwendungen hinweg nutzen können. So können wir deinen unterschiedlichen digitalen Inhalten mit Google Fonts ganz easy einen professionellen Look verleihen, ohne dafür Geld auszugeben.
Wie werden Google Fonts in Squarespace verwendet?
Schriftarten sind ein wichtiger Bestandteil der Gestaltung von Websites. Sie haben einen großen Einfluss auf die Wirkung und können deinen Markencharakter unterstreichen. Deshalb ist die Auswahl der Schriftart entscheidend.
Es gibt so genannte Systemschriftarten, die schon auf unseren Geräten installiert sind. Deren größter Nachteil ist, dass sie so oft verwendet werden, dass es schwierig ist, damit einen einzigartigen Look zu kreieren. Arial und Times New Roman sagen dir sicherlich was. Das sind die bekanntesten Systemschriftarten.
Im Gegensatz dazu sind Google Fonts auf Google’s Servern - also extern - gespeichert. Beim Aufrufen einer Website, die Google Fonts verwendet, wird also eine Verbindung zum Server hergestellt und die Schriftarten von extern geladen.
Das gleiche gilt übrigens auch für die Adobe Fonts (Auch Adobe Typekit genannt).
Squarespace macht es uns super einfach, sowohl Google als auch Adobe Fonts auf der Website zu verwenden. Eine riesige Schriftensammlung steht direkt in den Stil-Einstellungen zur Verfügung.
Squarespace hostet die Schriftarten aber nicht selbst (im Gegensatz zu Chimpify (Affiliatelink)), sondern baut eben eine Verbindung zu dem jeweiligen Server (Google oder Adobe/Typekit) auf, um die verwendet Schriften zu laden.
Was ist das Problem bei der Verwendung von Gogle Fonts in Squarespace?
Das Problem ist, dass beim Laden der Google Schriftarten von externen Servern, wohl persönliche Daten (wie die IP-Adresse der Nutzer:innen) an Google übertragen werden. Das ist nach Bestimmungen der DSGVO nur dann erlaubt, wenn sie vorher ihre Zustimmung dafür erteilen.
Das bedeutet, dass man als Website Betreiber:in abgemahnt werden kann, wenn man Google Fonts standardmäßig in Squarespace benutzt.
Wichtig ist auf jeden Fall keine Panik zu machen, solltest du so ein Abmahnschreiben bekommen. Das sind meist automatisierte Massenschreiben, ohne Rechtsvertretung. Da will jemand Geschäfte machen. Ich finde, dass in diesem Artikel ganz gut beschrieben ist, was es mit den Schreiben auf sich hat.
Update 24.10.2022: hier sind noch weitere interessante Ressourcen zu dem Thema, woraus klar hervorgeht, dass diese Abmahnwelle ziemlich daneben ist:
LG Baden-Baden erlässt einstweilige Verfügung gegen Google Fonts-Abmahner
Ein sehr unterhaltsamer LinkedIn Beitrag, wie man dem Abmahnanwalt Kilian Lenard auch begegnen kann. Bisschen fies. Aber Karma und so …
Es ist gar nicht so schwarz, weiß, weiter es scheint mit den Google Fonts. Carsten Bildhäuser hat auf dem Blog seiner Kanzlei die möglichen praktischen Lösungen aus rechtlicher Sicht zusammengefasst.
Update 31.03.2023: Dr. Max Greger, ein Anwalt, dem ich auf LinkedIn folge hat gegen die Google-Fonts-Abmahner geklagt und recht bekommen.
Welche Lösungsmöglichkeiten gibt es, wenn du Google Fonts in Squarespace verwenden willst?
Das Einholen der Einwilligung könnte ja eine Lösung sein, ist aber nicht praktikabel. Die Einwilligung müsste nämlich eingeholt werden, bevor die Schriftarten geladen werden und das ist technisch nicht umsetzbar. Es hat sich stattdessen eine andere Vorgehensweise als Lösung etabliert.
Nämlich: die Schriftarten lokal speichern.
Auf diese Weise kann man sicherstellen, dass keine persönlichen Daten an Dritte weitergegeben werden. Wie du das genau machen kannst, habe ich dir im nächsten Abschnitt Schritt für Schritt erklärt.
Update 01.01.2026: Seit ein paar Monaten ist es möglich lokal eingebundene Google Fonts ohne CSS in Squarespace zu nutzen. Ich habe die Vorgehensweise in diesem Artikel aktualisiert.
Wie bindest du Google Fonts DSGVO-konform in Squarespace ein?
(Mit Adobe Fonts verhält sich das übrigens etwas anders. Dazu weiter unten mehr)
Bis vor Kurzem war das in Squarespace ehrlich gesagt ein ziemlicher Workaround-Zirkus: Wer vermeiden wollte, dass Google Fonts von externen Servern geladen werden, musste immer über CSS nachhelfen.
Squarespace hat hier inzwischen nachgebessert: Eigene Schriftarten lassen sich direkt in Squarespace hochladen und anschließend ganz normal im Editor auswählen – ohne CSS. Damit kannst du Google Fonts (oder andere gekaufte Schriften) lokal nutzen und bist datenschutz-technisch konform.
Für die technische Umsetzung sind deshalb nur noch zwei Dinge wichtig:
Alles auf Systemschrift umstellen (damit die Verbindung zu den externen Servern erst mal gekappt ist)
Deine Schriftdateien direkt im Squarespace Style Editor hochladen und auswählen
Und jetzt Schritt für Schritt:
1. Alles auf Systemschriftart umstellen
Squarespace 7.1
Gehe im Hauptmenü → Website → Stil oder klicke auf das Pinsel-Icon links oben.
Klicke auf Schriftarten → Dann auf Alle Schriftarten-Pakete. Hier hast du die Wahl zwischen Sans-Serif, Serif und Gemischt und darin (ziemlich weit unten) je ein Systemschriften-Paket:
Sans-Serif → “Helvetica Neue + Arial”
Serif → “Georgia + Times New Roman”
Gemischt → “Verdana + Georgia”
Wähle eines aus und speichere deine Einstellungen.
Squarespace 7.0
Gehe im linken Hauptmenü zu → Design → Website-Stil
Jetzt kannst du entweder jedes Element manuell auf eine Systemschriftart umstellen, also überall dort, wo es eine Einstellung für die Schriftart gibt (Navigation, Inhalt, Mobil-Menü, die Buttons, usw.) → das würde ich nur machen, wenn deine Google Schriftart sehr sparsam für nur wenige Elemente verwendet wurde.
3. Oder du machst die Umstellung global. Dafür musst du im Style Editor ganz nach unten scrollen und auf “Alle auf Systemschriftarten festlegen” klicken.
2. Google Fonts (oder andere Schriftarten) in Squarespace hochladen
Damit wir die Google Fonts ain Squarespace hochladen können, musst du sie zuerst bei Google runterladen und auf deinem Gerät speichern.
Dazu suchst du nach deiner Schriftart und klickst dann rechts oben auf “Download family”. Ein ZIP-Ordner wird jetzt in deinen Downloads abgelegt, wo du die .ttf-Datei findest.
Ein wichtiger Hinweis:
Variable Fonts werden aktuell (noch?) nicht unterstützt.
Es wichtig deshalb zu wissen, dass du die statischen Dateien und die einzelnen Schnitte (Light, Bold, Regular) separat hochladen musst. Das funktioniert problemlos, auch wenn du mehrere Dateien gleichzeitig auswählst. Squarespace erkennt dann automatisch, welche Schnitte zusammengehören, und bündelt sie unter einer Schriftfamilie. (siehe Screenshot weiter unten)
D.h. wenn du vorher die Überschrift H1 in Bold Italic hattest und die H2 in Regular, musst du beide einzeln in Squarespace hochladen. Im Download findest du die einzelnen Schnitte im Ordner “static”.
Hier zum Beispiel bei der Playfair Display:
Der Upload ist dort integriert, wo du ohnehin deine Schriftarten einstellst.
Neben der Schriftauswahl findest du ein kleines Pfeil-Symbol, über das sich eigene Schriftarten (zum Beispiel aus Google Fonts) direkt in Squarespace importieren lassen. Nach dem Upload stehen sie dir wie jede andere Schriftart zur Verfügung und können überall verwendet werden.
Du klickst also in den Website-Stil-Einstellungen → Schriftarten direkt in die einzelnen Elemente (Überschriften, Absätze …), klickst dann auf die ausgewählte Schriftart , um sie zu ändern und fügst über den Upload-Icon deine eigene Schriftart hinzu.
Du kannst hier auch mehrere Schriftarten hochladen und dann nacheinander zuordnen.
Upload-Button
Hier siehst du, dass ich 2 verschiedene Schnitte der Schriftart Source Sans 3 hochgeladen habe. Squarespace erkennt automatisch, dass sie zur selben Schrift-Familie gehören und lässt dich das über die Einstellung “Stärke” die passende Stärke auswählen.
Was ist, wenn ich nur Adobe Fonts auf meiner Squarespace Website verwende?
Lass mich der vollständigkeitshalber noch etwas hinzufügen.
Aus Sicht der DSGVO verhält es sich mit den Adobe Fonts im Prinzip genauso wie mit Google Fonts. Mehr dazu in diesem Artikel von eRecht24.
Leider können die Adobe Schriftarten nicht wie die Google Fonts runtergeladen und lokal gespeichert werden, so die Lizenzbestimmungen. Die oben beschriebene Lösung geht also nicht für Adobe Fonts, außer man hat einen separaten Lizenzvertrag mit dem entsprechenden Schriftenhersteller oder mit einem lizenzierten Händler. Dann kannst du alles genauso wie oben beschrieben anwenden.
Troubleshooting
Du hast alles gemacht, was da oben steht und deine Website ist bei der Prüfung immer noch rot. Das könnte das Problem sein:
Wenn du zuvor eine Google-Schrift aus dem Standardkatalog verwendet hast, ohne den Zwischenschritt über Systemschriften zu machen, solltest du sorgfältig prüfen, ob wirklich überall die hochgeladene Version ausgewählt ist. Bleibt an einer Stelle die ursprüngliche Schrift aktiv, wird sie weiterhin extern geladen.
Ob noch externe Fonts geladen werden, kannst du auf der Live-Seite mit den Entwicklertools überprüfen:
Rufe die Entwicklertools deines Browsers auf (z. B. in Chrome per Rechtsklick → „Untersuchen“) und suche im Code nach Hinweisen auf externe Font-Server. Tauchen dort Einträge wie fonts.googleapis.com oder use.typekit.net auf, wird mindestens eine Schrift noch von außen eingebunden.
Wenn das der Fall ist, muss irgendwo in den Schriften-Einstellungen noch eine Google Schriftart aus den ursprünglichen Einstellungen der Website-Vorlage hängen geblieben sein.
Um das zu prüfen, gehst du im Hauptmenü auf → Design → Website-Stil → Schriftarten. Dann scrollst du ganz runter und klickst auf Stile zuweisen:
Überall dort, wo ein benutzerdefinierter Stil zugewiesen ist, könnte eine andere als die “Standard”-Schriftart drin sein. Gehe diese alle durch und stelle um auf die Adobe Schriftart.
Damit sollte das Problem gelöst sein.
Weitere mögliche Ursachen:
Deine Website hat
Ein reCAPTCHA im Formular Block, Newsletter Block, Werbe Pop-up oder Produkt Warteliste.
Google Maps
YouTube Videos
Ein Formular wird mit der Google Drive Speicheroption genutzt.
Und anscheinend auch, wenn
Google Analytics
Google Search Console
Acuity Scheduling
mit der Website verbunden sind, aber das konnte ich in meinen Tests nicht bestätigen.
Mögliche Lösungen:
Einen Screenshot der Google Map als Bild verwenden und diese zum eigenen Google Unternehmenseintrag verlinken.
Kreativ werden und den eigenen Standort individuell gestalten, so wie ich das hier im Footer gelöst habe und dann ebenfalls auf den Unternehmenseintrag verlinken
Statt YouTube Videos versuche ich so gut es geht, das Video Hosting von Squarespace zu verwenden. Oder auch ein Thumbnail des YouTube Videos als Bild hinzufügen und das zum Video zu verlinken, statt es einzubinden.
Eine – scheinbar - einfache Lösung gegen Spam:
https://mehrwert-muenchen.de/2021/05/spam-managen/
→ Verstecktes Feld, was zwingend leer bleiben muss, sonst kann das Formular nicht geschickt werden.
Sonstige Eistellungen:
Schrifteinstellungen de Werbe Pop-Ups. Prüfe, ob dort noch ein Google Font verwendet wird. Findest du unter Marketing → Werbe Pop Up → Stil
Medieneinstellungen bei Sammlungen-Seiten (z.B. Blog) könnten auf Video eigestellt sein. Diese auf Bild umstellen. Du findest die Eistellungen in dem du mit der Maus über die Seite führst → Zahnrädchen anklickst → Medien → dann rechts auf Bild statt Video klicken.
Alle Fenster schließen → Browser Cache leeren → Website nochmal prüfen
Diese Anleitung gilt übrigens auch, wenn du andere Schriftarten benutzen willst, die du z.B. bei Creative Market kaufen kannst. In dem Fall bitte darauf achten eine Webfont Lizenz zu kaufen, damit du sie auf deiner Website verwenden darfst.
Achtung! Laut Lizenzbedingungen dürfen Adobe Fonts leider nicht auf eigenen Server runtergeladen werden.