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 nach unten und klicken Sie auf Theme-Einstellungen.
Schritt 3. Klicken Sie auf Typografie (einige Themes nennen dies „Schriftarten“).
Schritt 4. Sie sehen Schriftart-Auswähler für verschiedene Textrollen – normalerweise:
- Überschriften-Schriftart – verwendet für H1, H2, H3
- Fließtext-Schriftart – verwendet für Absätze, Labels und allgemeinen Text
Schritt 5. Klicken Sie neben jeder Textrolle auf Ändern. Ein Schriftart-Auswähler mit der kuratierten Bibliothek von Shopify öffnet sich.
Schritt 6. Suchen Sie nach einer Schriftart. Klicken Sie auf eine, um eine Vorschau anzuzeigen. 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.
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.
Wie kann ich den Schriftstil ändern?
Schriftgröße und Schriftstärke (fett, normal, leicht) werden in der Regel separat von der Schriftfamilie eingestellt. Suchen Sie in den Theme-Einstellungen → Typografie nach den Größenreglern. Einige Themes bieten die Überschriftegröße als Optionen wie „Groß“, „Mittel“, „Klein“ an; andere geben Pixelwerte an.
Für eine feinere Kontrolle über Schriftstärke und -größe bei spezifischen Elementen ist Custom CSS erforderlich. Fügen Sie dieses unter Theme-Einstellungen → Custom CSS hinzu:
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 Bibliothek von Shopify enthalten ist – eine gekaufte Schriftart wie GT Walsheim, Canela oder Neue Haas Grotesk –, umfasst der Prozess das Hochladen von Schriftdateien und das Schreiben von CSS.
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 zulassen.
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: 'IhrSchriftname';
src: url('{{ "ihre-schrift.woff2" | asset_url }}') format('woff2'),
url('{{ "ihre-schrift.woff" | asset_url }}') format('woff');
font-weight: 400;
font-display: swap;
}Schritt 5. Wenden Sie die Schriftart auf Ihre Elemente an:
body {
font-family: 'IhrSchriftname', sans-serif;
}Dieser Prozess erfordert ein gewisses Verständnis von CSS. Fehler werden Ihren Shop nicht zum Absturz bringen, aber die Schriftart wird erst angezeigt, wenn der Code korrekt ist.
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 sollten Sie beachten:
Schriftfamilien einschränken. Jede einzelne Schriftfamilie lädt eine separate Datei. Zwei Familien (eine für Überschriften, eine für den Fließtext) sind meist die richtige Balance.
Verwenden Sie font-display: swap. Dies weist den Browser an, Text in einer System-Schriftart anzuzeigen, während die benutzerdefinierte Schriftart geladen wird, anstatt den Text ganz auszublenden. Die integrierten Schriftarten von Shopify erledigen dies automatisch. Für benutzerdefinierte Schriftarten fügen Sie dies 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 eine Variable-Font-Version anbietet, nutzen Sie diese.
