Die wichtigsten Erkenntnisse
- Shopify-Schriftarten werden im Theme-Editor unter Theme-Einstellungen → Typografie geändert.
- Shopify bietet eine kuratierte Schriftarten-Bibliothek, einschließlich Google Fonts und Systemschriftarten.
- Eigene Marken-Schriftarten (z. B. gekaufte Schriftarten) erfordern das Hochladen der Schriftartdateien in den Assets-Ordner deines Themes und das Hinzufügen von CSS.
- Fudge kann benutzerdefinierte Schriftarten in deinem Theme implementieren, ohne dass du dafür CSS schreiben musst.
Typografie prägt das Erscheinungsbild und Gefühl deiner Marke, noch bevor ein Besucher ein einziges Wort liest. Das Aktualisieren von Schriftarten in Shopify ist für die Standardbibliothek unkompliziert – und für benutzerdefinierte Schriftarten möglich, aber etwas aufwendiger.
Warum Sie uns vertrauen können
Jacques hat über 15 Jahre Erfahrung in der Shopify-Entwicklung. Wir haben Fudge entwickelt – einen KI-Storefront-Editor, der von hunderten Shopify-Stores genutzt wird und eine Bewertung von 4.9 im Shopify App Store hat.
So ändern Sie Schriftarten in Shopify
Schritt 1. Gehe zu Onlineshop → Themes → Anpassen.
Schritt 2. Scrolle in der linken Seitenleiste ganz nach unten und klicke auf Theme-Einstellungen.
Schritt 3. Klicke auf Typografie (einige Themes nennen dies „Schriftarten“).
Schritt 4. Du siehst Font-Picker für verschiedene Textrollen – typischerweise:
- Überschriften (Headings) – verwendet für H1, H2, H3
- Fließtext (Body) – verwendet für Absätze, Labels und allgemeinen Text
Schritt 5. Klicke neben jeder Textrolle auf Ändern. Ein Font-Picker mit Shopifys kuratierter Bibliothek öffnet sich.
Schritt 6. Durchsuche die Liste oder suche nach einer Schriftart. Klicke auf eine, um eine Vorschau zu sehen. Wenn du zufrieden bist, klicke auf Auswählen.
Schritt 7. Speichern.
Die Änderung der Schriftart gilt für alle Seiten, die die Standardstile für Überschriften und Fließtext deines Themes verwenden.
Verwandt: Fudge Store Editor.
Verwandt: Schriftgröße von Überschriften in Shopify ändern.
Welche Schriftarten bietet Shopify an?
Wenn du dich noch in der Entscheidungsphase befindest, anstatt direkt Änderungen vorzunehmen, schlägt dir unser kostenloser AI Shopify Store Builder eine Typografie-Kombination zusammen mit einer Farbpalette und einem Homepage-Design vor, passend für das, was du verkaufst.
Shopifys integrierte Schriftarten-Bibliothek umfasst:
- Google Fonts – die vollständige Sammlung von Open-Source-Schriftarten von Google, einschließlich beliebter Optionen wie Inter, Poppins, Playfair Display und DM Sans.
- Systemschriftarten – OS-native Schriftarten wie -apple-system, Arial und Georgia, die sofort und ohne externe Anfragen geladen werden.
- Kuratierte Shopify-Schriftarten – eine Auswahl, die Shopify speziell für die E-Commerce-Nutzung hervorhebt.
Du kannst im Font-Picker nach dem Namen suchen. Wenn ein Google Font nicht im Dropdown-Menü erscheint, ist er möglicherweise nicht in der von Shopify gehosteten Bibliothek enthalten – suche einfach nach dem Namen.
Wie kann ich den Schriftstil ändern?
Schriftgröße (Font size) und Schriftstärke (Font weight – bold, regular, light) werden normalerweise separat von der Schriftfamilie festgelegt. Unter Theme-Einstellungen → Typografie findest du Optionen für die Größe. Einige Themes bieten für die Überschriftengröße Optionen wie „Groß“, „Mittel“, „Klein“ an; andere verwenden Pixelwerte.
Für eine detaillierte Kontrolle über die Schriftstärke und -größe bestimmter Elemente wird Custom CSS benötigt. Füge es unter Theme-Einstellungen → Custom CSS hinzu:
Verwandt: Farben und Schriftarten in Shopify aktualisieren.
h1,
h2 {
font-weight: 700;
letter-spacing: -0.02em;
}
p {
font-size: 16px;
line-height: 1.6;
}So fügen Sie Shopify eine benutzerdefinierte Schriftart hinzu
Wenn deine Marke eine Schriftart verwendet, die nicht in der Shopify-Bibliothek enthalten ist – z. B. eine gekaufte Schriftart wie GT Walsheim, Canela oder Neue Haas Grotesk –, musst du die Schriftartdateien hochladen und etwas CSS schreiben.
Schritt 1. Besorge dir die Webfont-Dateien für deine Schriftart. Du benötigst das Format .woff2 (bevorzugt) und .woff als Fallback. Deine Schriftlizenz muss die Nutzung im Web erlauben.
Schritt 2. Gehe zu Onlineshop → Themes → Aktionen → Code bearbeiten.
Schritt 3. Klicke im Ordner Assets auf Neues Asset hinzufügen → lade deine .woff2- und .woff-Dateien hoch.
Schritt 4. Öffne die Datei assets/base.css (oder die Haupt-CSS-Datei deines Themes) und füge eine @font-face-Deklaration hinzu:
@font-face {
font-family: 'YourFontName';
src:
url('{{ "your-font.woff2" | asset_url }}') format('woff2'),
url('{{ "your-font.woff" | asset_url }}') format('woff');
font-weight: 400;
font-display: swap;
}Schritt 5. Wende die Schriftart auf deine Elemente an:
body {
font-family: 'YourFontName', sans-serif;
}Dieser Prozess erfordert ein wenig Erfahrung mit CSS. Fehler werden deinen Shop nicht kaputt machen, aber die Schriftart wird erst dann angezeigt, wenn der Code korrekt ist.
Verwandt: Markenfarben in Shopify aktualisieren.
Fudge zur Implementierung benutzerdefinierter Schriftarten nutzen
Wenn Sie eine benutzerdefinierte Schriftart verwenden möchten, ohne den Code anzufassen, beschreiben Sie es einfach Fudge:
„Implementiere unsere Markenschriftart GT Walsheim für Überschriften und verwende Inter für den Fließtext. Die Schriftdateien befinden sich in unserem Assets-Ordner.“
Fudge schreibt die @font-face-Deklarationen und CSS-Zuweisungen als Entwurf für Ihre Überprüfung. Nichts geht live, bevor Sie es genehmigt haben.
Performance-Aspekte bei Schriftarten
Schriftarten beeinflussen die Ladezeit der Seite. Ein paar Dinge, die Sie beachten sollten:
Schriftfamilien begrenzen. Jede einzelne Schriftfamilie lädt eine separate Datei. Zwei Familien (eine für Überschriften, eine für Fließtext) sind meist die richtige Balance.
Nutzen Sie font-display: swap. Dies weist den Browser an, Text in einer Systemschrift anzuzeigen, während die benutzerdefinierte Schrift geladen wird, anstatt den Text ganz auszublenden. Die integrierten Schriftarten von Shopify erledigen dies automatisch. Bei Custom Fonts fügen Sie es wie oben gezeigt zu Ihrer @font-face-Deklaration hinzu.
Variable Fonts bevorzugen. Variable Fonts packen mehrere Schriftstärken in eine einzige Datei. Wenn Ihre Schriftart als Variable Font verfügbar ist, nutzen Sie diese.
Ähnlich: Shopify Theme beschleunigen.
FAQ
Nur marginal, wenn sie falsch eingesetzt werden. Google Fonts, die über Shopifys font_picker geladen werden, werden über das Shopify CDN bereitgestellt, sind schnell und gecacht – das hat minimale SEO-Auswirkungen. Google Fonts, die über direkte <link>-Tags von fonts.googleapis.com geladen werden, verursachen einen zusätzlichen DNS-Lookup und können LCP leicht verschlechtern. Nutze nach Möglichkeit den Shopify Font-Picker.
Für Fließtext (Body Text): Inter, Söhne oder System-Stack (-apple-system) – alle bieten eine hohe Lesbarkeit bei kleinen Größen. Für Überschriften: Hängt von der Kategorie ab. Fashion/Beauty: Serifenschriftarten (Playfair, Canela, Tiempos). Modern/Tech: Geometrische Sans-Serif (DM Sans, Inter, Poppins). Für die meisten Shops gilt: Priorisiere Lesbarkeit vor Persönlichkeit.
Zwei sind typisch (Überschrift + Fließtext) – das sorgt für eine visuelle Hierarchie, ohne zu überladen. Eine Schriftart ist für minimalistische Marken in Ordnung, wenn stattdessen Variationen in der Schriftstärke/Größe verwendet werden. Drei oder mehr sind selten gerechtfertigt – sie verwässern die Markenidentität und erhöhen das Ladevolumen. Wenn du in Versuchung gerätst, drei zu verwenden, prüfe, ob zwei nicht ausreichen würden.
Ja, und es ist das schnellstmögliche Setup – Systemschriftarten (-apple-system, Segoe UI, Helvetica Neue) laden sofort und erfordern keinen Font-Request. Der Kompromiss: Weniger Markenunterscheidbarkeit, da die Besucher Schriftarten sehen, die sie auch auf vielen anderen Websites sehen. Einige Premium-Marken verwenden Systemschriftarten bewusst für die „Apple-artige“ Geschwindigkeit und Klarheit.
Das nennt man Flash of Unstyled Text (FOUT). Der Browser rendert eine Fallback-Schriftart, bevor die benutzerdefinierte Schriftart geladen wird, und tauscht sie dann aus. Mit font-display: swap (empfohlen) findet der Tausch statt, aber der Text ist durchgehend lesbar. Ohne diese Einstellung kann der Text während des Ladevorgangs unsichtbar sein (Flash of Invisible Text – noch schlimmer). Wenn deiner @font-face-Deklaration font-display: swap fehlt, beschreibe das Problem in Fudge und die App aktualisiert die Deklaration in deinem Theme.
Verwandt: Ein Shopify-Theme beschleunigen.