So aktualisierst du Schriftarten in Shopify (2026)

Das Wichtigste in Kürze

• 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 Markenschriftarten (z. B. gekaufte Fonts) erfordern das Hochladen der Schriftart-Dateien in den Assets-Ordner deines Themes und das Hinzufügen von CSS.
• Fudge kann benutzerdefinierte Schriftarten in deinem gesamten Theme implementieren, ohne dass du selbst CSS schreiben musst.

Um Schriftarten in Shopify zu aktualisieren, gehe zu Onlineshop → Themes → Anpassen → Theme-Einstellungen → Typografie und wähle neue Schriftarten für Überschriften und Fließtext aus. Für eine gekaufte Markenschriftart müssen die Dateien ins Theme hochgeladen und eine kurze @font-face-Regel hinzugefügt werden.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Erfahrung in der Shopify-Entwicklung. Wir entwickeln Fudge, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 im Shopify App Store.

So änderst du Schriftarten in Shopify

Schritt 1. Gehe zu Onlineshop → Themes → Anpassen.

Schritt 2. Scrolle in der linken Seitenleiste nach unten und klicke auf Theme-Einstellungen.

Schritt 3. Klicke auf Typografie (einige Themes nennen das “Schriftarten” oder “Fonts”).

Schritt 4. Du siehst nun Font-Picker für verschiedene Textarten – typischerweise:

• Überschriften-Schriftart – verwendet für H1, H2, H3
• Fließtext-Schriftart – verwendet für Absätze, Labels und allgemeinen Text

Schritt 5. Klicke neben jeder Textart auf Ändern. Ein Font-Picker mit Shopifys kuratierter Bibliothek öffnet sich.

Schritt 6. Stöbere oder suche nach einer Schriftart. Klicke auf eine, um die 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 Standard-Überschriften und -Fließtexte deines Themes verwenden.

Infos zu Überschriftengrößen findest du unter So änderst du die Schriftgröße von Überschriften in Shopify.

Welche Schriftarten bietet Shopify an?

Die integrierte Schriftarten-Bibliothek von Shopify umfasst:

• Google Fonts – eine große Auswahl an Open-Source-Schriftarten von Google, darunter Inter, Poppins, Playfair Display und DM Sans.
• Systemschriftarten (System fonts) – OS-native Schriftarten wie -apple-system, Arial und Georgia, die ohne externe Anfragen sofort geladen werden.
• Lizenzierte Schriftarten – kommerzielle Schriftarten, die Shopify für die Nutzung in Themes lizenziert hat.

Du kannst im Font-Picker nach 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 mal nach dem Namen.

Wenn du dich noch nicht entschieden hast, schlägt dir unser kostenloser AI Shopify Store Builder eine passende Typografie-Kombination zusammen mit einer Farbpalette und einem Homepage-Design für alles vor, was du verkaufst.

Wie kann ich den Schriftstil ändern?

Schriftgröße (Font size) und Schriftstärke (Font weight) (bold, regular, light) werden normalerweise separat von der Schriftfamilie (Font family) eingestellt. Schau unter Theme-Einstellungen → Typografie nach den Größenreglern. Einige Themes bieten Optionen wie “Groß”, “Mittel”, “Klein” für Überschriften an; andere verwenden Pixelwerte.

Für eine feinkörnige Kontrolle über die Schriftstärke und -größe bestimmter Elemente wird Custom CSS benötigt. Füge es unter Theme-Einstellungen → Custom CSS (Benutzerdefiniertes CSS) hinzu:

h1,
h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

p {
    font-size: 16px;
    line-height: 1.6;
}

Mehr zu Farben und Schriftarten im Zusammenspiel findest du unter So aktualisierst du Farben und Schriftarten in Shopify.

So fügst du eine benutzerdefinierte Schriftart zu Shopify hinzu

Wenn deine Marke eine Schriftart verwendet, die nicht in der Shopify-Bibliothek enthalten ist – z. B. eine gekaufte wie GT Walsheim, Canela oder Neue Haas Grotesk –, musst du die Schriftart-Dateien hochladen und CSS schreiben.

Schritt 1. Besorge dir die Web-Font-Dateien für deine Schriftart. Du brauchst das Format .woff2 (bevorzugt) und .woff als Fallback. Deine Schriftlizenz muss die Webnutzung erlauben.

Schritt 2. Gehe zu Onlineshop → Themes, klicke dann auf das Drei-Punkte-Menü (…) neben deinem Theme und auf Code bearbeiten.

Schritt 3. Klicke im Ordner Assets auf Neues Asset hinzufügen (Add a new asset) → lade deine .woff2- und .woff-Dateien hoch.

Schritt 4. Öffne die Datei layout/theme.liquid und füge die @font-face-Regel innerhalb eines <style>-Tags im <head> hinzu. Liquid wird in dieser Datei ausgeführt, sodass der asset_url-Filter die tatsächliche URL der Schriftart-Datei ausgibt (in einer reinen .css-Datei würde das nicht funktionieren):

<style>
    @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;
    }
</style>

Schritt 5. Wende die Schriftart auf deine Elemente an:

body {
    font-family: 'YourFontName', sans-serif;
}

Dieser Prozess setzt etwas Erfahrung mit CSS voraus. Fehler machen deinen Store zwar nicht kaputt, aber die Schriftart wird erst angezeigt, wenn der Code korrekt ist.

Fudge verwenden, um benutzerdefinierte Schriftarten zu implementieren

Wenn du eine benutzerdefinierte Schriftart verwenden möchtest, ohne Code anzufassen, beschreibe sie einfach Fudge, dem KI-Operator für Shopify-Stores:

“Implementiere unsere Markenschriftart GT Walsheim in allen Überschriften und verwende Inter für den Fließtext. Die Font-Dateien befinden sich in unserem Assets-Ordner.”

Fudge schreibt die @font-face-Deklarationen und CSS-Zuweisungen als Entwurf zur Überprüfung, damit du die neue Schriftart erst einmal auf deinen echten Seiten sehen kannst. Nichts geht online, bevor du es nicht freigegeben hast.

Überlegungen zur Performance von Schriftarten

Schriftarten wirken sich auf die Ladezeit der Seite aus. Ein paar Dinge solltest du beachten:

Begrenze Schriftfamilien. Jede einzelne Schriftfamilie lädt eine separate Datei. Zwei Familien (eine für Überschriften, eine für Fließtext) sind meist die richtige Balance.

Nutze font-display: swap. Das sagt dem Browser, dass er den Text in einer Systemschriftart anzeigen soll, während die benutzerdefinierte Schriftart lädt, anstatt den Text komplett zu verstecken. Shopifys integrierte Schriftarten machen das automatisch. Bei Custom Fonts solltest du dies zu deiner @font-face-Deklaration hinzufügen, wie oben gezeigt.

Bevorzuge variable Schriftarten (Variable Fonts). Variable Fonts packen mehrere Schriftstärken in eine einzige Datei. Wenn es für deine Schriftart eine variable Version gibt, nutze diese.

Weitere Tipps zur Ladezeit findest du unter So machst du dein Shopify-Theme schneller.

FAQ