Das Wichtigste in Kürze

Shopify-Schriftarten werden im Theme Editor unter Theme-Einstellungen → Typografie geändert.

Shopify bietet eine kuratierte Schriftarten-Bibliothek inklusive Google Fonts und Systemschriftarten.

Eigene Brand-Fonts (z. B. gekaufte Schriftarten) erfordern das Hochladen der Schriftdateien in den Assets-Ordner Ihres Themes und das Hinzufügen von CSS.

Fudge kann benutzerdefinierte Schriftarten in Ihrem gesamten Theme implementieren, ohne dass Sie CSS schreiben müssen.

Typografie bestimmt, wie sich Ihre Marke anfühlt, noch bevor ein Besucher ein einziges Wort liest. Das Aktualisieren von Schriftarten in Shopify ist für die Standard-Bibliothek unkompliziert – und für benutzerdefinierte Schriftarten zwar möglich, aber etwas aufwendiger.

Warum Sie uns vertrauen können

Jacques verfügt über mehr als 15 Jahre Erfahrung in der Shopify-Entwicklung. Wir haben Fudge entwickelt – einen KI-Storefront-Editor, der von Hunderten von Shopify-Stores genutzt wird und eine 5,0-Bewertung im Shopify App Store hat.

So ändern Sie Schriftarten in Shopify

Schritt 1. Gehen Sie zu Onlineshop → Themes → Anpassen.

Schritt 2. Scrollen Sie in der linken Seitenleiste ganz nach unten und klicken Sie auf Theme-Einstellungen.

Schritt 3. Klicken Sie auf Typografie (einige Themes nennen dies „Schriftarten“).

Schritt 4. Sie sehen Schriftwähler für verschiedene Textrollen – typischerweise:

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

Schritt 5. Klicken Sie neben jeder Schriftrolle auf Ändern. Es öffnet sich ein Schriftwähler mit der kuratierten Bibliothek von Shopify.

Schritt 6. Suchen Sie nach einer Schriftart. Klicken Sie eine an, um die Vorschau zu sehen. Wenn Sie zufrieden sind, klicken Sie auf Auswählen.

Schritt 7. Speichern.

Die Änderung der Schriftart gilt für alle Seiten, die die Standard-Überschriften und Fließtext-Styles Ihres Themes verwenden.

Ähnlich: Fudge Store Editor.

Ähnlich: Schriftgröße der Überschriften in Shopify ändern.

Welche Schriftarten bietet Shopify an?

Die integrierte Schriftbibliothek von Shopify 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
System-Schriftarten – OS-native Schriftarten wie -apple-system, Arial und Georgia, die sofort geladen werden, ohne dass eine externe Anfrage erforderlich ist
Kuratierte Shopify-Schriftarten – eine Auswahl, die Shopify speziell für den E-Commerce hervorhebt

Sie können im Schriftart-Auswähler nach Namen suchen. Wenn ein Google Font nicht im Dropdown-Menü erscheint, ist er möglicherweise nicht in der von Shopify gehosteten Bibliothek enthalten – prüfen Sie dies anhand des Namens.

Verwandt: Fudge Store Editor.

Verwandt: Update Brand Colors in Shopify.

Verwandt: Speed Up a Shopify Theme.

Verwandt: Update Colors and Fonts in Shopify.

Wie kann ich den Schriftstil ändern?

Schriftgröße und Schriftstärke (fett, normal, leicht) werden normalerweise getrennt von der Schriftfamilie eingestellt. Suchen Sie in den Theme-Einstellungen → Typografie nach den Größenreglern. Einige Themes bieten für die Überschriftengröße Optionen wie „Groß“, „Mittel“, „Klein“ an; andere geben Pixelwerte an.

Für eine präzise Kontrolle über Schriftstärke und Größe bei bestimmten Elementen ist Custom CSS erforderlich. Fügen Sie dieses unter Theme-Einstellungen → Custom CSS hinzu:

Ähnlich: 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 Ihre Marke eine Schriftart verwendet, die nicht in der Shopify-Bibliothek enthalten ist – eine gekaufte Schriftart wie GT Walsheim, Canela oder Neue Haas Grotesk – müssen Sie Schriftdateien hochladen und CSS schreiben.

Schritt 1. Besorgen Sie sich die Webfont-Dateien für Ihre Schriftart. Sie benötigen das Format .woff2 (bevorzugt) und .woff als Fallback. Ihre Schriftlizenz muss die Webnutzung erlauben.

Schritt 2. Gehen Sie zu Onlineshop → Themes → Aktionen → Code bearbeiten.

Schritt 3. Klicken Sie unter dem Ordner Assets auf Neues Asset hinzufügen → laden Sie Ihre .woff2- und .woff-Dateien hoch.

Schritt 4. Öffnen Sie assets/base.css (oder die Haupt-CSS-Datei Ihres Themes) und fügen Sie 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. Wenden Sie die Schriftart auf Ihre Elemente an:

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

Dieser Prozess erfordert etwas Erfahrung mit CSS. Fehler werden Ihren Shop nicht zum Absturz bringen, aber die Schriftart wird erst angezeigt, wenn der Code korrekt ist.

Benötigen Sie Hilfe bei der Implementierung von Custom Fonts? Beschreiben Sie es Fudge.

Try Fudge for Free

Ähnlich: 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.