Update: So gehts noch besser!

Du kannst deine Schriften jetzt noch besser in deine Squarespace Website integrieren.

Schau hier in diesem neuen Tutorial, wie es einfacher geht:

Inhaltsverzeichnis

Google Fonts und die DSGVO: Schriften in deiner Website richtig einbetten

Wenn du schon einmal eine Website erstellt hast oder es vor hast, bist du sicherlich über den Begriff "Google Fonts" gestolpert.
Schriften spielen eine entscheidende Rolle im Webdesign, denn sie beeinflussen maßgeblich die Lesbarkeit und das Gesamtbild deiner Seite.
Google Fonts sind eine beliebte Ressource für Webdesigner, um ansprechende Schriftarten in ihren Projekten zu verwenden.

In diesem Artikel werde ich erklären, was Google Fonts sind und wie du sie in deine Squarespace Website einbetten kannst,
wobei wir auch einen Blick auf die Datenschutz-Grundverordnung (DSGVO) werfen.

Was sind Google Fonts?

Google Fonts ist ein kostenloser Dienst von Google, der es Webdesignern ermöglicht, eine breite Auswahl von Schriftarten in ihren Projekten zu verwenden. Diese Schriften sind Open Source und stehen zur freien Verwendung zur Verfügung. Das bedeutet, dass du sie in kommerziellen und nicht-kommerziellen Projekten nutzen kannst, ohne dafür Lizenzgebühren zahlen zu müssen.

Die Vorteile von Google Fonts sind vielfältig. Sie bieten eine große Auswahl an Schriftarten in verschiedenen Stilen, die deine Website professionell und ansprechend gestalten können. Außerdem werden die Schriften von Google auf schnellen Servern gehostet, was die Ladezeiten deiner Website optimiert. Doch wie fügt man diese Schriften in seine Website ein, ohne gegen Datenschutzbestimmungen zu verstoßen?

Squarespace nutzt Google Fonts

Squarespace ist ein amerikanisches Unternehmen und nutzt Google Fonts als Standardschriften in seinen Schriftenpaketen. Ohne die DSGVO ist dies super praktisch und richtig toll. Leider können wir Europäer dies Dank der DSGVO nicht nutzen. Aber warum?

Google Fonts und die DSGVO

Mit der Datenschutz-Grundverordnung (DSGVO) wurden strengere Vorschriften für den Umgang mit personenbezogenen Daten eingeführt. Das gilt auch für das Einbetten von externen Ressourcen wie Google Fonts in deine Website. Wenn du Google Fonts verwendest, werden die Schriftarten normalerweise von den Servern von Google geladen. Das bedeutet, dass bei jedem Besuch deiner Website Anfragen an die Google-Server gestellt werden. Diese Anfragen können dazu führen, dass Informationen über die Besucher deiner Website, wie deren IP-Adresse, an Google übertragen werden. IP Adressen sind personenbezogene Daten und somit unterliegen sie der Datenschutzgrundverordnung.

Um sicherzustellen, dass du die DSGVO einhältst, gibt es einige bewährte Methoden, um Google Fonts in deine Website einzubetten, ohne die Datenschutzbestimmungen zu verletzen: Die Nutzung der Goolge Fonts auf dem Hoster Server.

Lokale Einbettung von Google Fonts

Eine Möglichkeit, die DSGVO-Anforderungen zu erfüllen, ist die lokale Einbettung von Google Fonts. Dabei lädst du die Schriftarten von den Google-Servern herunter und speicherst sie auf deinem eigenen Server. Dadurch werden keine Daten an Google übertragen, wenn jemand deine Website besucht. Du kannst die Schriftarten von der offiziellen Google Fonts-Website herunterladen und sie in deinem Webprojekt verwenden.

Du hast keine Lust den Artikel zu lesen?

Dann schaue dir das Tutorial Video an:

CSS-Einbindung von Google Fonts in Squarespace

Die gängigste Methode, Google Fonts in deine Website einzubetten, ist die Verwendung von CSS (Cascading Style Sheets). Google stellt für jede Schriftart, die sie anbieten, einen speziellen CSS-Code bereit, den du in deine eigenen Stylesheets einfügen kannst. Hier ist eine einfache Anleitung:

1. Besuche die Google Fonts-Website (https://fonts.google.com/).

2. Suche nach den Schriftarten, die du in deine Website integrieren möchtest, und lade sie runter.

3. Gehe auf deine Website und scrolle ganz runter zu den Website Tool. Klicke auf Benutzerdefiniertes CSS.

4. Klicke jetzt auf Benutzerdefinierte Dateien:

5. Klicke auf das Plus Zeichen:

6. Füge deine Schriften nach einander hinzu:

7. Du siehst deinen Schriftendateien jetzt in einer Liste:

Jetzt hast du deine Schriften auf dem System hochgeladen. Prima!
Als nächster Schritt musst du diese Schriften mit dem System verkuppeln.

Die Schriften mit Squarespace verbinden

1.Kopiere dir diesen CSS Code in dein CSS Fenster:

@font-face {
font-family: DEINESCHRIFT;
src: url();
}

2. Lösche den Text DEINESCHRIFT gib deiner Schrift einen Namen.

3. Jetzt klickst du zwischen die grünen Klammern und wählst die passende Schrift aus deiner Liste aus.

Jetzt siehst du den Dateipfad der ausgewählten Schrift zwischen den grünen Klammern. Bitte beachte, dass kein Leerzeichen zwischen Dateipfad und den Klammern ist. Sonst funktioniert es nicht.

4. Das wiederholst du für alle deine Schriften, die du hochladen möchtest.

Jetzt sind alle deine Schriften auf deiner Squarespace Website hochgeladen.

Schriftarten auf Überschriften, Absätzen und Buttons mit CSS verweisen

Jetzt kommt der schwierigste Teil von dem ganzen Prozess.

Kopiere dir den folgenden CSS Code unter deine eben erstellten @font-face.

/* Allgemeine Schriften */

/* Überschrift 1 */

h1 {font-family: 'DEINESCHRIFT';}

/* Überschrift 2 */

h2 {font-family: 'DEINESCHRIFT';}

/* Überschrift 3 */

h3 {font-family: 'DEINESCHRIFT';}

/* Überschrift 4 */

h4 {font-family: 'DEINESCHRIFT';}

/* Absatz 1 */

.sqsrte-large {font-family: 'DEINESCHRIFT';}

/* Absatz 2 */

p {font-family: 'DEINESCHRIFT';}

/* Absatz 3 */

.sqsrte-small {font-family: 'DEINESCHRIFT';}

/* Seitentitel, falls du kein Logo hochgeladen hast */

.header-title-text a {font-family: 'DEINESCHRIFT' !important;}

/* Hauptmenü */

.header-nav-item a {font-family: 'DEINESCHRIFT' !important;}

/* Buttons */

/* Button im Hauptmenü */

.header-actions-action .btn {font-family: 'DEINESCHRIFT' !important;}

/* Großer Button (Sekundär) */

.sqs-block-button-element--large, .sqs-button-element--secondary {font-family: 'DEINESCHRIFT' !important;}

/* Mittlerer Button (Primär) */

.sqs-block-button-element--medium, .sqs-button-element--primary {font-family: 'DEINESCHRIFT' !important;}

/* Kleiner Button (Tertiär) */

.sqs-block-button-element--small, .sqs-button-element--tertiary {font-family: 'DEINESCHRIFT' !important;}

Ersetze jetzt DEINSCHRFT mit dem Namen, den du bei @font-face vergeben hast.

Also zum Beisiel:

/* Überschrift 1 */

h1 {font-family: 'OpensansBold';}

Fazit

Google Fonts müssen unbedingt eingebettet werden. Starte immer mit einem Systemschriften Paket bei Squarespace, damit auf keinen Fall irgendwelche Schriften geladen werden. Bitte beachte auch, das verlinkte Videos oder andere externe Ressourcen, die du auf deiner Website einbettest, eventuelle auch Google Fonts aktivieren. Zum Beispiel bei YouTube Verlinkungen solltest du daher unbedingt einen Cookie Banner auf deiner Seite einpflegen, der diese Automatische Verbindung unterbricht und erst nach Zustimmung des Nutzers, die Schriften lädt.