Tutorials

Eigene Schriftarten in Shopify einbinden [2025 Easy Guide]

Melden

Hier ist ein aktueller und leicht verständlicher Guide, wie du im Jahr 2025 eigene Schriftarten (Custom Fonts) in dein Shopify-Theme einbindest.

Die Standard-Schriftarten von Shopify (via Google Fonts oder Adobe) sind gut, aber eine eigene Schriftart verleiht deinem Shop ein einzigartiges Branding. In dieser Anleitung lernst du, wie du Schritt-für-Schritt jede beliebige Schriftart installierst.

Schritt 1: Das richtige Schriftformat vorbereiten

Bevor du startest, benötigst du deine Schriftdatei. Für das Web sind folgende Formate am besten geeignet:

  • WOFF2 (Empfohlen): Beste Komprimierung und schnellste Ladezeit.
  • WOFF: Der ältere Standard, falls WOFF2 nicht verfügbar ist.

Tipp: Wenn du nur eine .ttf oder .otf Datei hast, nutze einen Online-Konverter wie Transfonter, um sie in WOFF2 umzuwandeln. Aktiviere dort auch die Option "Fix vertical metrics", damit die Schrift sauber sitzt.

Schritt 2: Schriftdateien in Shopify hochladen

  1. Logge dich in dein Shopify-Admin ein.
  2. Gehe zu Inhalt > Dateien (oder Content > Files).
  3. Klicke auf Dateien hochladen und wähle deine .woff2-Dateien aus.
  4. Sobald sie hochgeladen sind, siehst du daneben ein Link-Symbol. Klicke darauf, um den Link zu kopieren (wir brauchen ihn gleich).

Schritt 3: Die Schriftart im CSS registrieren

Jetzt müssen wir dem Theme sagen, dass diese neue Schrift existiert.

  1. Gehe zu Onlineshop > Themes.
  2. Klicke bei deinem aktuellen Theme (z. B. Dawn) auf die drei Punkte (...) und wähle Code bearbeiten.
  3. Suche im Ordner Assets nach der Datei base.css (in manchen Themes heißt sie theme.css oder global.css).
  4. Scrolle ganz nach unten und füge folgenden Code ein:
@font-face {
  font-family: "MeineSchriftart";
  src: url("DEIN-KOPIERTER-LINK-HIER") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Ersetze MeineSchriftart durch den echten Namen deiner Schrift und füge bei url() den Link ein, den du in Schritt 2 kopiert hast.

Schritt 4: Die Schriftart den Elementen zuweisen

Damit deine Texte auch wirklich in der neuen Schrift erscheinen, musst du sie den HTML-Elementen zuweisen. Füge diesen Code ebenfalls ganz unten in deine base.css ein:

Option A: Für alles (Überschriften & Fließtext)

body, h1, h2, h3, h4, h5, h6, p, a, span {
  font-family: "MeineSchriftart", sans-serif !important;
}

Option B: Nur für Überschriften

h1, h2, h3, h4, h5, h6 {
  font-family: "MeineSchriftart", serif !important;
}

Schritt 5: Speichern und Testen

  1. Klicke rechts oben auf Speichern.
  2. Öffne deinen Shop in einem neuen Tab und schaue dir das Ergebnis an.
  3. Wichtig: Falls du keine Änderung siehst, leere deinen Browser-Cache oder öffne den Shop im Inkognito-Modus.

Bonus: Profi-Tipps für 2025

  • Performance: Lade nicht zu viele verschiedene Schnitte (z. B. Light, Regular, Bold, Extra Bold). Jeder Schnitt ist eine eigene Datei und verlangsamt die Ladezeit. Meist reichen Regular (400) und Bold (700).
  • Lade-Verhalten (font-display: swap): Dieser Befehl im Code sorgt dafür, dass Besucher den Text sofort sehen (in einer Ersatzschrift), bevor die Custom Font fertig geladen ist. Das ist wichtig für deine Google PageSpeed Werte.
  • Rechtliches: Achte darauf, dass du eine gültige Web-Lizenz für die Schriftart besitzt. Die Nutzung einer Desktop-Lizenz im Web kann zu Abmahnungen führen.

Herzlichen Glückwunsch! Du hast erfolgreich deine eigene Schriftart in Shopify integriert, ohne eine teure App nutzen zu müssen.

0