Schriftart ändern bei Squarespace 7.1 (Site Styles + CSS)

Schriftart in Squarespace 7.1 ändern: per Site Styles, mit eigener Schriftdatei oder CSS für einzelne Elemente. Anleitung, Entscheidungstabelle und Lösungen.

Häufige Fragen

Wie ändere ich die Schriftart meiner gesamten Squarespace-Website?

Öffne bei einer Website mit Version 7.1 die Site Styles, klicke auf Fonts (Schriftarten) und wähle entweder ein empfohlenes Schriftpaket oder öffne All Font Packs (Alle Schriftpakete) und filtere nach Sans-Serif, Serif oder gemischt. Ein Schriftpaket legt die Schriftarten für Überschriften, Absätze, Buttons und sonstigen Text in einem Schritt fest.

Kann ich jede Google-Schriftart in Squarespace verwenden?

Du kannst im Schrift-Dropdown nach Google Fonts suchen. Laut dem Hilfecenter von Squarespace sind aber nicht alle Google Fonts in der Bibliothek enthalten. Fehlt deine Wunschschrift, kannst du die Schriftdatei selbst hochladen, sofern die Lizenz das erlaubt.

Welche Schriftdateitypen kann ich bei Squarespace hochladen?

Der Schrift-Upload in den Site Styles akzeptiert OTF-, TTF-, WOFF- und WOFF2-Dateien. Der separate Bereich Custom Files (Eigene Dateien) für den CSS-Editor nennt TTF, OTF und WOFF. Für eine WOFF2-Datei nutzt du daher den Upload in den Site Styles und nicht den Dateibereich für CSS.

Brauche ich eine Erlaubnis, um eine eigene Schrift hochzuladen?

Ja. Laut dem Hilfecenter von Squarespace brauchst du die Erlaubnis des Schriftinhabers oder Lizenzgebers, um eine Schrift auf deiner Website zu verwenden. Prüfe die Lizenz auf Webnutzung, bevor du hochlädst.

Warum unterscheiden sich die Schritte für die Schriftart auf meiner Website?

Websites mit Version 7.0 und Version 7.1 haben unterschiedliche Schrifteinstellungen. Die Schritte in dieser Anleitung gelten für 7.1. Bei 7.0 laufen Schriftänderungen über die Site Styles im Design-Bereich. Squarespace weist außerdem darauf hin, dass benutzerdefinierte Adobe-Schriften, die unter 7.0 eingerichtet wurden, unter 7.1 nicht unterstützt werden. Du wählst dann stattdessen eine integrierte 7.1-Schrift.

Bleibt mein eigenes CSS erhalten, wenn ich das Template wechsle?

Bei einer Website mit Version 7.0 wird eigenes CSS laut Squarespace beim Wechsel des Templates nicht übernommen. Bewahre eine Kopie von jedem CSS auf, das du hinzufügst, damit du es bei Bedarf wieder einfügen kannst.

Kurz gesagt: Öffne bei einer Squarespace-7.1-Website die Site Styles, klicke auf Fonts und wähle entweder ein Schriftpaket oder gestalte Headings (Überschriften), Paragraphs (Absätze), Buttons und Miscellaneous (Sonstiges) einzeln. Für eine Schrift, die nicht in der Bibliothek ist, lädst du im selben Bereich deine eigene Datei hoch. Eigenes CSS brauchst du nur, wenn du ein bestimmtes Element gezielt ändern willst.

Diese Anleitung beschreibt die Schritte für Version 7.1, wie sie im Hilfecenter von Squarespace stehen (Stand: November 2026). Läuft deine Website noch auf Version 7.0, heißen die Bereiche anders; siehe den Hinweis zur Version weiter unten.

Welche Methode passt zu dir?

Nimm die einfachste Option, die zum gewünschten Ergebnis führt. Mit jeder Zeile weiter unten in der Tabelle steigt der Aufwand.

Was du erreichen willst	Beste Methode	Aufwand
Ein komplett neuer Look mit einem Klick	Schriftpaket in den Site Styles	Gering
Unterschiedliche Schriften für Überschriften und Fließtext	Schrift pro Kategorie in den Site Styles	Gering
Eine bestimmte Google-Schriftart	Suche im Schrift-Dropdown	Gering
Eine Hausschrift, für die du eine Lizenz besitzt	Schriftdatei hochladen	Mittel
Nur eine Überschrift, ein Button oder ein Abschnitt	Eigenes CSS	Mittel bis hoch

Methode 1: Schrift mit einem Schriftpaket ändern

Ein Schriftpaket legt für alle Textkategorien gleichzeitig passende Schriften fest. Das ist der schnellste Weg, eine Website neu zu gestalten.

Öffne den Editor und klicke auf Site Styles (das Pinsel-Symbol).
Klicke auf Fonts.
Wähle eines der empfohlenen Pakete oder klicke auf All Font Packs und filtere nach Sans-Serif, Serif oder gemischt.
Scrolle durch deine Seiten und prüfe Überschriften, Fließtext und Buttons, bevor du das Panel schließt.

Pakete sind ein guter Start, können aber dazu führen, dass dir die Überschriftenschrift gefällt, die Fließtextschrift aber nicht. Genau dafür ist die nächste Methode da.

Methode 2: Schrift für eine Textkategorie ändern

Unter Fonts teilt Squarespace den Text in vier Gruppen auf. Du kannst jede einzeln einstellen:

Headings: Seitentitel und die Überschriftenstile in deinen Textblöcken.
Paragraphs: Fließtext.
Buttons: Beschriftungen von Buttons.
Miscellaneous: kleinerer Text wie Bildunterschriften und Formularbeschriftungen (der genaue Umfang dieser Gruppe hängt vom Template ab, prüfe also nach der Änderung ein paar Seiten).

So änderst du eine Kategorie:

Klicke in Site Styles > Fonts auf die gewünschte Kategorie, zum Beispiel Headings.
Öffne das Schrift-Dropdown und suche nach dem Namen.
Wähle die Schrift und passe bei Bedarf Stil, Schriftschnitt und Größe an.
Für Adobe Fonts nutzt du den Link Additional Fonts (Weitere Schriften) am Ende der Liste.

Squarespace lässt dich außerdem eine Basisgröße festlegen, von der sich anderer Text ableitet. Wirkt nach einem Schriftwechsel alles zu groß oder zu klein, passe zuerst diesen Wert an, bevor du einzelne Blöcke änderst.

Ein praktischer Tipp: Ändere Überschriften und Absätze in getrennten Durchgängen. Änderst du beides auf einmal und etwas sieht komisch aus, weißt du nicht, woran es liegt. Hilfe bei der Auswahl einer passenden Kombination findest du in unserem Ratgeber So wählst du Website-Schriftarten aus.

Methode 3: Eigene Schrift hochladen

Verwendet deine Marke eine Schrift, die nicht in der Bibliothek ist, lade sie hoch. Squarespace weist darauf hin, dass du dafür die Erlaubnis des Schriftinhabers oder Lizenzgebers brauchst.

Besorge dir die Schriftdatei im Format OTF, TTF, WOFF oder WOFF2. Der Upload in den Site Styles akzeptiert alle vier.
Öffne Site Styles > Fonts, wähle eine Kategorie (oder das Schrift-Dropdown) und suche die Upload-Option.
Ziehe deine Datei in den Bereich für hochgeladene Schriften oder klicke auf das Plus-Symbol und wähle sie auf deinem Computer aus.
Wähle die hochgeladene Schrift für die gewünschte Kategorie aus.
Veröffentliche die Änderungen und sieh dir die Live-Website am Desktop und am Smartphone an, um zu prüfen, ob die Schrift geladen wird.

Die Bezeichnungen in der Oberfläche ändern sich hin und wieder. Heißt ein Button anders, suche im Schrift-Dropdown nach dem Upload- oder Plus-Symbol.

Häufige Probleme beim Upload

Die Schrift erscheint in der Liste, sieht aber falsch aus. Möglicherweise fehlt in der Datei ein Schnitt oder Stil (Fett, Kursiv). Lade jeden Schnitt, den du nutzen willst, als eigene Datei hoch.
Die Schrift funktioniert im Editor, aber nicht für Besucher. Lade die veröffentlichte Seite hart neu (Cache leeren) und prüfe die Lizenz der Schriftdatei auf Webnutzung.
Du hast eine WOFF2-Datei hochgeladen und versuchst, sie aus dem CSS-Dateibereich einzubinden. Der Bereich Custom Files im CSS-Editor nennt als Schrifttypen TTF, OTF und WOFF, nicht WOFF2. Nutze für WOFF2 den Upload in den Site Styles.

Methode 4: Ein Element mit eigenem CSS ansprechen

Die Site Styles ändern Schriften websiteweit nach Kategorie. Brauchst du eine Ausnahme, etwa eine einzelne Überschrift in einer anderen Schrift, kann eigenes CSS das leisten. Die CSS-Hinweise von Squarespace empfehlen, CSS auf Schriften, Farben und Hintergründe zu beschränken, weil andere Änderungen dein Layout zerstören können.

Lade die Schrift zuerst mit Methode 3 hoch oder wähle eine Bibliotheksschrift, damit sie auf deiner Website bereits verfügbar ist.
Öffne Website > Pages > Custom CSS (der genaue Pfad kann je nach Website leicht abweichen).
Füge eine Regel wie die folgende ein und speichere.

```css /* Beispiel: Jede H2 nutzt eine Schrift, die bereits auf deiner Website vorhanden ist */ h2 { font-family: "Ihr Schriftname", serif; letter-spacing: 0.02em; }

/* Beispiel: Nur den Text von Buttons ändern */ .sqs-button-element--primary { font-family: "Ihr Schriftname", sans-serif; } ```

Ersetze "Ihr Schriftname" durch den exakten Namen, der in den Site Styles angezeigt wird. Die generische Ausweichschrift (serif oder sans-serif) hält den Text lesbar, falls die Schrift nicht lädt. Klassennamen können sich je nach Template und Squarespace-Updates unterscheiden. Prüfe den Selektor für dein Zielelement daher mit dem Inspektor deines Browsers.

Möchtest du CSS nur auf einer einzelnen Seite anwenden, beschreibt das Hilfecenter von Squarespace Optionen auf Seitenebene. Prüfe dort die aktuellen Schritte, bevor du dich darauf verlässt.

Kurze Schrift-Checkliste vor dem Veröffentlichen

Kopiere diese Liste und gehe sie einmal durch.

[ ] Überschriften und Fließtext nutzen höchstens zwei Schriftfamilien.
[ ] Der Fließtext ist auch am Smartphone gut lesbar, nicht nur am Desktop.
[ ] Jeder verwendete Schnitt (Regular, Fett, Kursiv) ist in der Schrift verfügbar.
[ ] Du hast die Lizenz, jede hochgeladene Schrift im Web zu nutzen.
[ ] Buttons und Formularbeschriftungen passen schriftlich zum Rest der Seite.
[ ] Du hast eine Kopie von jedem eigenen CSS gesichert.
[ ] Du hast die Live-Website geprüft, nicht nur die Vorschau im Editor.

Version 7.0 und 7.1 im Vergleich

Laut Hilfecenter von Squarespace gelten die Schriftoptionen von 7.1 für 7.1-Websites, während 7.0-Websites eigene Schrifteinstellungen haben. Bei 7.0 laufen Schriftänderungen über die Site Styles im Design-Bereich. Überlegst du einen Wechsel: Squarespace bietet ein Update-Tool, und unser Squarespace-Test zeigt, wie sich der aktuelle Editor schlägt. Wenn dich Schriften nur eines von mehreren Ärgernissen sind, listet die Seite Squarespace-Alternativen andere Website-Baukästen, und unsere Kostenübersicht zeigt, was eine Squarespace-Website insgesamt kostet.

Wenn du eine neue Website startest

Wählst du ein Template aus oder baust eine Website von Grund auf, lege die Typografie zuerst fest. Das ist einfacher, als sie hinterher zu korrigieren. Mit dem kostenlosen Tarif von We.Inc kannst du bis zu drei Websites aus fertigen Templates veröffentlichen. Der KI-Builder, der aus einem Prompt eine Website entwirft, startet im Starter-Tarif für $20 im Monat. Du kannst dich hier registrieren.

Kostenlos starten · Keine Kreditkarte nötig

Umair Ali Sadaqat

Gründer von We.Inc

Umair ist der Gründer von We.Inc. Er schreibt über die Erstellung von Websites mit KI, Agenturen und den Geschäftsbetrieb eines Webstudios.

Bereit, etwas Großartiges zu bauen?

Schließe dich 15,000+ Unternehmen an, die mit We.Inc starten, wachsen und automatisieren, alles auf einer Plattform.