Schriften

Die richtige Schrift prägt das Erscheinungsbild Ihres Shops nachhaltig. Mit dem Theme-Editor können Sie aus Google Fonts wählen oder eigene Schriftdateien hochladen.

Schriften im Theme-Editor

Die Schrift-Einstellungen finden Sie unter Einstellungen → Design → Theme-Editor → Typografie.

Zwei Schriften verwenden

Sie können zwei verschiedene Schriften kombinieren:

Feld	Verwendung	Empfehlung
Body Font	Fließtext, Listen, Beschreibungen	Serifenlose Schrift (z. B. Inter, Open Sans)
Heading Font	Überschriften (H1–H6)	Ausdrucksstarke Schrift (z. B. Playfair Display, Merriweather)

Tipp: Lassen Sie das Feld Heading Font leer, um die Body Font auch für Überschriften zu verwenden.

Schriftgröße und -gewicht

Einstellung	Optionen
Basisschriftgröße	14px (Small), 16px (Base), 18px (Large)
Standard-Schriftgewicht	Light (100), Normal (400), Medium (500), Bold (700)

Die Basisschriftgröße beeinflusst alle Textelemente. Verwenden Sie 16px für optimale Lesbarkeit auf den meisten Geräten.

Google Fonts

Ihr Shop hat Zugriff auf über 1.000 Google Fonts. Diese Schriften sind lizenzfrei und kostenlos.

Google Fonts auswählen

Öffnen Sie Einstellungen → Design → Theme-Editor → Typografie.
Klicken Sie auf Body Font oder Heading Font.
Ein Dropdown-Menü zeigt die verfügbaren Schriften in Kategorien:
- Popular — Häufig verwendete Schriften
- Sans Serif — Serifenlose Schriften
- Serif — Schriften mit Serifen
- Display — Große, ausdrucksstarke Schriften
- Handwriting — Handschrift-ähnliche Schriften
- Monospace — Festbreitenschriften
Wählen Sie eine Schrift durch Anklicken aus.
Klicken Sie auf Speichern.

Beliebte Google Fonts Kombinationen

Body Font	Heading Font	Stil
Inter	Playfair Display	Elegant, modern
Open Sans	Merriweather	Klassisch, zeitlos
Roboto	Roboto Mono	Minimalistisch, technisch
Lato	Raleway	Freundlich, professionell
Source Sans Pro	Crimson Text	Editorial, Premium

Custom Fonts hochladen

Sie können Ihre Marken-Schriften oder spezielle Schriftdateien hochladen.

Anforderungen

Folgende Dateitypen werden unterstützt:

WOFF2 (Web Open Font Format 2) — Modern, beste Kompression
WOFF (Web Open Font Format) — Weit unterstützt
TTF (TrueType Font) — Fallback

Tipp: Verwenden Sie .woff2 für bessere Performance. Dateigröße reduziert sich typischerweise um 30–50 % gegenüber TTF.

Font hochladen

Öffnen Sie Einstellungen → Design → Theme-Editor → Typografie.
Scrollen Sie zum Bereich Custom Fonts.
Geben Sie einen Familiennamen ein (z. B. MyBrandFont, Corporate Sans).
Wählen Sie Schriftgewicht (100 = Thin, 400 = Regular, 700 = Bold, 900 = Black).
Wählen Sie Stil (Normal oder Italic).
Klicken Sie auf Font-Datei auswählen.
Wählen Sie Ihre Datei aus dem Computer.
Die Datei wird hochgeladen und ist sofort verfügbar.

Mehrere Schriftgewichte hochladen

Möchten Sie eine Schrift in verschiedenen Gewichten anbieten (z. B. Regular + Bold)?

Laden Sie die Regular-Variante mit Gewicht 400 und Stil Normal hoch.
Laden Sie die Bold-Variante mit Gewicht 700 und Stil Normal hoch.
Geben Sie für beide den gleichen Familiennamen ein.

Der Theme-Editor erkennt mehrere Gewichte desselben Familiennamens automatisch.

Hochgeladene Fonts verwalten

Alle hochgeladenen Custom Fonts werden im Bereich Custom Fonts aufgelistet:

Spalte	Funktion
Familienname	Der Name, unter dem Sie die Schrift in den Schrift-Auswahlfeldern finden
Gewicht + Stil	z. B. "700 Normal" (Bold Regular)
Löschen	Entfernt die Schrift; bestehende Verwendungen fallen auf Fallback-Schrift zurück

Schriftwahl-Best-Practices

Lesbarkeit

Verwenden Sie für Fließtext eine Schriftgröße von mindestens 16px.
Serifenlose Schriften sind auf Bildschirmen meist besser lesbar als Schriften mit Serifen.
Ausreichender Zeilenabstand (Line-Height) ist wichtig — der Standard ist normalerweise 1.5.

Performance

Google Fonts werden vom Google CDN geliefert — Sie müssen nicht selbst gehostet werden.
Custom Fonts erhöhen die Seitenladezeit — verwenden Sie maximal 2–3 verschiedene Schriften.
Laden Sie nur die Schriftgewichte hoch, die Sie tatsächlich verwenden (Regular, Bold, vielleicht Italic).

Design-Kohärenz

Maximal 2–3 verschiedene Schriften im gesamten Shop verwenden.
Eine Schrift für Body + eine für Headings ist die klassische Kombination.
Achten Sie darauf, dass die Headings-Schrift die gleiche optische Größe wie die Body-Schrift hat, sonst sieht die Hierarchie falsch aus.

Brand-Konsistenz

Wenn Ihr Unternehmen eine Corporate Font hat:

Laden Sie diese als Custom Font hoch.
Verwenden Sie sie als Body Font oder Heading Font.
Exportieren Sie die Einstellungen über Theme-Editor → DESIGN.md, um die Schriftauswahl zu dokumentieren.

Typografie-Vorschau

Der Theme-Editor zeigt eine Live-Vorschau mit echten Beispieltexten:

Große Überschrift (H1)
Mittelgroße Überschrift (H2)
Fließtext (Paragraph)
Kleine Textgröße (Caption)

Diese Vorschau aktualisiert sich in Echtzeit, wenn Sie Schriften oder Größen ändern — ohne speichern zu müssen.

Häufige Probleme

Problem	Ursache	Lösung
Google Font wird nicht geladen	Werbeblocker blockiert Google Fonts	Werbeblocker für die Domain zulassen
Custom Font wird nicht angewendet	Falsches Dateiformat oder Dateiname	Unterstützte Formate: `.woff2`, `.woff`, `.ttf` verwenden
Font-Datei ist zu groß	TTF-Datei nicht komprimiert	Zu WOFF2 konvertieren (reduziert Größe um 30–50 %)
Schrift sieht auf mobilen Geräten seltsam aus	Schrift für kleine Größen nicht optimiert	Eine bessere Schrift wählen oder Schriftgröße erhöhen
Mehrere Schriftgewichte funktionieren nicht	Familiennamen stimmen nicht überein	Verwenden Sie exakt den gleichen Familiennamen für alle Gewichte
Custom Font ist nach dem Hochladen nicht verfügbar	Upload war fehlerhaft	Laden Sie die Datei erneut hoch

Externe Tools und Ressourcen

Google Fonts erkunden

Google Fonts ist eine kostenlose Sammlung von über 1.000 Schriften. Sie können dort:

Nach Kategorie filtern (Sans Serif, Serif, Display usw.)
Schriften in Echtzeit mit Beispieltext testen
Lizenzen überprüfen (alle Google Fonts sind offen lizenziert)

Font-Konvertierung

Wenn Sie eine TTF-Datei haben und sie in WOFF2 konvertieren möchten:

Online: CloudConvert oder Convertio
Offline: FontForge (kostenlos, Open Source)

Font-Paarung-Inspiration

Websites wie FontPair und FontJoy helfen, harmonische Schriftkombinationen zu finden.

Lizenzierung und Rechtliches

Google Fonts: Alle Schriften sind unter offenen Lizenzen verfügbar (meist Open Font License). Sie können sie kostenfrei auf Ihrer Website verwenden.
Custom Fonts: Stellen Sie sicher, dass Sie die Lizenz besitzen, die Schrift auf Ihrer Website zu verwenden. Viele kommerzielle Schriften erfordern eine Web-Lizenz.

Nächste Schritte

Theme-Editor — Vollständige Anleitung zu allen Theme-Einstellungen
Design & Farben — Farbberatung und Design-Tipps
Google Fonts — Kostenlose Schriften erkunden