Webfonts für Squarespace (Claude)

Online-Tool zur Font-Konvertierung

Fonts müssen oft von OpenType (otf) oder einem anderen Format für Desktop in eines für Web Fonts umgewandelt werden. Dies kann man mit diesem Online-Tool bewerkstelligen:

fontconverter.io

Anweisungen von Claude

Wie kann ich ein Web Font für eine Squarespace Site nutzen?

Es gibt drei Wege, je nachdem welche Schrift du willst:

1. Eingebaute Fonts (einfachster Weg)

Squarespace hat bereits hunderte Google Fonts und Adobe Fonts integriert: - Design → Site Styles → Fonts (bei 7.1) bzw. Design → Schriftarten - Dort kannst du direkt suchen und zuweisen – kein Code nötig.

2. Eigene Font-Datei hochladen (Custom Font via CSS)

Wenn deine Schrift nicht dabei ist (z. B. eine gekaufte Schrift mit Webfont-Lizenz):

Schritt 1: Font hochladen 1. Gehe zu Design → Custom CSS (bzw. Website → Website-Tools → Benutzerdefiniertes CSS) 2. Klicke unten auf „Manage Custom Files” / „Benutzerdefinierte Dateien verwalten” 3. Lade deine Font-Datei hoch (am besten .woff2 oder .woff)

Schritt 2: @font-face definieren Klicke nach dem Hochladen auf die Datei – Squarespace fügt die URL automatisch ein:

@font-face {
  font-family: 'MeineSchrift';
  src: url('https://static1.squarespace.com/.../deinfont.woff2')
format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Schritt 3: Schrift zuweisen

/* Überschriften */
h1, h2, h3, h4 {
  font-family: 'MeineSchrift', sans-serif !important;
}

/* Fließtext */
p, body {
  font-family: 'MeineSchrift', sans-serif !important;
}

3. Externe Fonts einbinden (z. B. via Code Injection)

Für Dienste wie Fonts.com oder selbst gehostete Fonts mit <link>-Tag: - Einstellungen → Erweitert → Code Injection → Header (erfordert Business-Plan oder höher) - Dann per CSS wie oben zuweisen.

Wichtige Hinweise

• Lizenz prüfen: Desktop-Lizenzen erlauben meist kein Web-Hosting – du brauchst eine Webfont-Lizenz.
• .woff2 bevorzugen: kleinste Dateigröße, von allen modernen Browsern unterstützt.
• !important ist bei Squarespace oft nötig, um die Theme-Styles zu überschreiben.
• Custom CSS funktioniert auf allen Plänen; Code Injection erst ab Business.

Soll ich dir helfen, die CSS-Selektoren für einen bestimmten Bereich deiner Site (z. B. nur Navigation oder nur Buttons) zu finden?

Kann ich auch andere Dateiformate einbinden?

Ja – Squarespace akzeptiert beim Font-Upload mehrere Formate, und auch im @font-face kannst du verschiedene einbinden:

Unterstützte Font-Formate

Mehrere Formate mit Fallback einbinden

Du kannst mehrere Quellen angeben – der Browser nimmt die erste, die er unterstützt:

@font-face {
  font-family: 'MeineSchrift';
  src: url('...meinfont.woff2') format('woff2'),
       url('...meinfont.woff') format('woff'),
       url('...meinfont.ttf') format('truetype');
  font-display: swap;
}

Praxis-Tipps

• Nur .woff2 reicht heute fast immer – WOFF2 wird seit Jahren von Chrome, Firefox, Safari und Edge unterstützt. Fallbacks brauchst du nur, wenn du sehr alte Browser bedienen musst.
• Hast du nur .ttf oder .otf? Konvertiere sie kostenlos, z. B. mit Transfonter oder CloudConvert – das spart oft 50–70 % Dateigröße. Achtung: Lizenz muss Konvertierung/Web-Einbettung erlauben.
• Variable Fonts ( .woff2 mit mehreren Strichstärken in einer Datei) funktionieren ebenfalls – dann font-weight: 100 900; im @font-face angeben.
• Jedes Format braucht einen eigenen @font-face-Block pro Schnitt (z. B. Regular, Bold, Italic), sonst rendert der Browser Fake-Bold/-Italic.

Brauchst du Hilfe beim Konvertieren einer bestimmten Datei oder beim Einrichten mehrerer Schriftschnitte (Bold/Italic)?