Das Wichtigste in Kürze
- Schriftarten werden in Shopify im Theme-Editor unter Theme-Einstellungen → Typografie geändert.
- Shopify bietet eine kuratierte Schriftarten-Bibliothek, die Google Fonts und Systemschriftarten umfasst.
- Eigene Markenschriften (z. B. gekaufte Schriftarten) erfordern das Hochladen der Schriftart-Dateien in den Assets-Ordner deines Themes und das Hinzufügen von CSS.
- Fudge kann eigene Schriftarten in deinem gesamten Theme implementieren, ohne dass du CSS schreiben musst.
Typografie prägt das Gefühl deiner Marke, bevor ein Besucher auch nur ein einziges Wort liest. Das Aktualisieren von Schriftarten in Shopify ist für die Standardbibliothek unkompliziert – und für eigene Schriftarten zwar 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.8 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?
Die integrierte Schriftarten-Bibliothek von Shopify umfasst:
- Google Fonts – die komplette Sammlung an Open-Source-Schriftarten von Google, einschließlich beliebter Optionen wie Inter, Poppins, Playfair Display und DM Sans
- Systemschriften (System Fonts) – betriebssystemeigene Schriftarten wie -apple-system, Arial und Georgia, die sofort und ohne externe Anfragen geladen werden
- Von Shopify kuratierte Schriften – eine Auswahl, die Shopify speziell für den E-Commerce hervorhebt
Du kannst im Font-Picker nach dem Namen suchen. Wenn ein Google Font nicht im Dropdown-Menü zu finden ist, ist er möglicherweise nicht in der von Shopify gehosteten Bibliothek enthalten – suche am besten direkt 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 geringfügig, wenn sie falsch gehandhabt werden. Google Fonts, die über den Shopify font_picker geladen werden, werden über das Shopify CDN bereitgestellt, sind schnell und gecached – minimale Auswirkungen auf das SEO. Google Fonts, die über direkte <link>-Tags von fonts.googleapis.com geladen werden, fügen einen zusätzlichen DNS-Lookup hinzu und können den LCP leicht beeinträchtigen. Verwende nach Möglichkeit den Font-Picker von Shopify.
Für Fließtext (Body Text): Inter, Söhne oder der System-Stack (-apple-system) – alle bieten eine sehr gute Lesbarkeit auch bei kleinen Größen. Für Überschriften: hängt von der Kategorie ab. Fashion/Beauty: Serifenschriften (Playfair, Canela, Tiempos). Modern/Tech: Geometrische Sans-Serif-Schriften (DM Sans, Inter, Poppins). Für die meisten Shops gilt: Lesbarkeit geht vor Persönlichkeit.
Zwei sind typisch (Überschrift + Fließtext) – das sorgt für eine visuelle Hierarchie, ohne zu überladen. Eine ist für minimalistische Marken in Ordnung, die stattdessen mit Variationen in Schriftstärke und -größe arbeiten. Drei oder mehr sind selten gerechtfertigt – es verwässert die Markenidentität und erhöht die Ladezeit. Wenn du versucht bist, drei zu verwenden, prüfe, ob zwei nicht auch ausreichen würden.
Ja, und es ist das schnellstmögliche Setup – Systemschriften (-apple-system, Segoe UI, Helvetica Neue) werden sofort und ohne Schriftanfrage geladen. Nachteil: geringerer Wiedererkennungswert der Marke, da Besucher Schriften sehen, die sie auch von jeder anderen Website kennen. Einige Premium-Marken verwenden Systemschriften ganz bewusst für die "Apple-ähnliche" Geschwindigkeit und Klarheit.
Das nennt man Flash of Unstyled Text (FOUT). Der Browser rendert die 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 bleibt durchgehend lesbar. Ohne diese Einstellung ist der Text während des Ladevorgangs möglicherweise unsichtbar (Flash of Invisible Text — noch schlimmer). Wenn in deiner @font-face-Deklaration font-display: swap fehlt, beschreibe den Fix für Fudge und es aktualisiert die Deklaration in deinem Theme.
Verwandt: Shopify-Theme schneller machen.