Wenn du eine Squarespace-Website erstellst, hast du Zugriff auf eine Vielzahl von Google Fonts und Adobe Fonts. Doch manchmal möchtest du vielleicht etwas ganz Besonderes, zum Beispiel deine eigenen, einzigartigen Schriftarten verwenden – sei es, weil sie Teil deines Brandings sind oder weil du spezifische Lizenzen für Webnutzung besitzt. Keine Sorge, das Hinzufügen eigener Schriften bei Squarespace ist gar nicht so kompliziert.
In diesem Beitrag zeige ich dir, wie du eigene Schriftarten hochlädst, sie für verschiedene Textarten auf deiner Website einsetzt und wie du deine Schrift nach Wunsch anpasst, um ein einzigartiges Design zu erstellen. Zudem gehen wir darauf ein, wie du dabei datenschutzkonform bleibst und welche Rolle die DSGVO bei der Nutzung von Fonts spielt.
Datenschutz und DSGVO – Nutzung von lokalen Fonts
Ein oft diskutiertes Thema in Bezug auf Datenschutz ist die Verwendung von externen Schriftarten, wie sie von Google Fonts oder Adobe Fonts bereitgestellt werden. Da diese Fonts direkt von externen Servern geladen werden, können personenbezogene Daten der Besucher wie IP-Adressen übertragen werden. Dies kann problematisch im Hinblick auf die DSGVO sein, die eine ausdrückliche Einwilligung der Nutzer erfordert, wenn deren Daten verarbeitet werden.
Squarespace bietet jedoch eine datenschutzfreundliche Lösung, indem du deine Schriftarten lokal hochlädst. Das bedeutet, dass die Schriftarten direkt von deinem eigenen Server geladen werden, ohne dass Daten an Dritte weitergegeben werden. Dies macht die Nutzung von eigenen Schriftarten wesentlich datenschutzkonformer, da keine personenbezogenen Daten an externe Anbieter übermittelt werden. Mit dieser Methode kannst du also sicherstellen, dass deine Website DSGVO-konform bleibt.
Eigene Schriftarten bei Squarespace hochladen
Der erste Schritt besteht darin, die Schriftart auf deinem Computer zu speichern. Achte darauf, dass du eine Webfont-Lizenz erwirbst, wenn du eine Schrift von externen Quellen kaufst – eine Seite wie Creative Market ist hierfür eine tolle Anlaufstelle. Nachdem du die Datei heruntergeladen hast, kannst du sie ganz einfach auf deine Squarespace-Seite hochladen.
Gehe zu Design > Benutzerdefiniertes CSS.
Klicke auf „Benutzerdefinierte Dateien“ und wähle „Bilder oder Schriftarten hinzufügen“.
Lade deine Schriftdatei hoch (meistens als .ttf oder .otf).
Kopiere diesen Code in das CSS-Feld:
/* Eigene Schrift */
@font-face {
font-family: ‚deine-Schriftart‘;
src: url(‚URL_ZUR_DEINER_SCHRIFT‘);
}
Achte darauf, die URL der Schriftdatei in den Code einzufügen und den Platzhalter ‚deine-Schriftart‘ durch den tatsächlichen Namen deiner Schrift zu ersetzen.
Eine Schriftart für die gesamte Website verwenden
Möchtest du die gleiche Schriftart für alle Texte auf deiner Website nutzen, kannst du dies ganz einfach tun. Kopiere diesen Code in dein CSS-Feld:
/* Alle Texte mit einer Schriftart */
html * {
font-family: ‚deine-Schriftart‘ !important;
}
Achte darauf, den Schriftnamen zu ersetzen. Das !important stellt sicher, dass diese Schriftart für alle Texte auf der Seite gilt.
Verschiedene Schriftarten für unterschiedliche Textarten
Wenn du verschiedene Schriftarten für Überschriften, Fließtext oder Buttons verwenden möchtest, entferne das !important aus dem vorherigen Code. Lade dann jede Schriftart einzeln hoch und wende sie gezielt an. Zum Beispiel:
/* Überschrift 1 */
h1 {
font-family: ‚deine-Schriftart‘ !important;
}
/* Fließtext */
p {
font-family: ‚deine-Schriftart2‘ !important;
}
Du kannst diesen Prozess für Überschrift 2, 3 und alle anderen Textarten wiederholen.
Stil anpassen: Dicke, Abstand und mehr
Möchtest du die Schrift noch weiter anpassen? Beispielsweise den Zeilenabstand oder die Schriftstärke? Das ist ebenfalls kein Problem. Hier ein Beispiel, wie du Überschrift 3 anpassen kannst:
/* Stil für Überschrift 3 */
h3 {
font-family: ‚deine-Schriftart‘;
font-weight: 400;
line-height: 1.5em;
letter-spacing: 0.05em;
}
font-weight: Bestimmt die Dicke der Schrift.
line-height: Definiert den Abstand zwischen den Zeilen.
letter-spacing: Legt den Abstand zwischen den einzelnen Buchstaben fest.
Schriftarten nur auf bestimmten Seiten ändern
Möchtest du eine Schriftart nur auf einer bestimmten Seite ändern? Das ist auch möglich. Du musst nur herausfinden, welche „Collection ID“ die Seite hat. Dies kannst du mit der Chrome Extension des Block Identifiers tun. Einmal gefunden, kannst du den folgenden CSS-Code verwenden:
/* Schrift nur auf einer bestimmten Seite ändern */
#collection-ID h3 {
font-family: ‚deine-Schriftart‘;
}
Ersetze die #collection-ID mit der richtigen ID deiner Seite.
Probleme beim Hochladen von Schriftarten
Manchmal klappt das Hochladen von Schriftarten nicht wie gewünscht. Ein häufiger Fehler ist, dass eine andere Schrift dieselbe Bezeichnung wie deine eigene Schriftart trägt. In diesem Fall hilft es oft, den Namen der Schrift zu ändern, um Konflikte zu vermeiden. Achte auch darauf, dass der CSS-Code korrekt ist und keine Syntaxfehler enthält.
Fazit
Das Hinzufügen eigener Schriftarten zu deiner Squarespace-Website kann das Design erheblich verbessern und es deiner Marke anpassen. Mit ein wenig CSS und den richtigen Einstellungen kannst du deine Website optisch aufwerten und deine Schriftarten ganz nach deinem Wunsch einsetzen – und das ganz ohne Datenschutzprobleme, indem du lokale Fonts nutzt. So bleibt deine Website sowohl kreativ als auch datenschutzkonform. Viel Spaß beim Gestalten!