Custom Fonts in Shopify: So bindest du individuelle Schriftarten ohne Entwickler ein

Oft scheitern spezifische Design-Vorstellungen an den Standard-Funktionen von Shopify. Ein klassisches Beispiel sind Custom Fonts.

Viele Händler bleiben bei den Standard-Schriften, weil sie davon ausgehen, dass für die Einbindung externer Schriften zwingend ein Entwickler nötig ist.

Die Realität ist: Du kannst das selbst lösen. Und noch wichtiger: Du kannst es so lösen, dass dein Team die Schriftart später im Theme Editor sogar selbst auswählen kann. Eine gute Quelle für hochwertige und kostenlose Fonts findest du zum Beispiel bei Fontshare.

Schritt 1: Datei hochladen

Lade deine Schriftart unbedingt im .woff2 Format in den Bereich Dateien (Files) in Shopify hoch. Dieses Format sorgt für die bestmögliche Performance im Browser.

Schritt 2: CSS-Einbindung

Suche im Code deines Themes nach der zentralen CSS-Datei – meist heißt sie theme.css, base.css oder main.css. Füge dort ganz unten folgendes Snippet ein:

@font-face { font-family: 'DEINE-SCHRIFTART'; src: url('Dateiname.woff2') format('woff2'); }

Die Schriftart wird jetzt geladen – sie erscheint jedoch noch nicht als Option im Theme Editor.

Schritt 3: Integration in den Theme Editor

Damit du die Schriftart nicht jedes Mal hardcoden musst, machen wir sie als wählbare Option verfügbar. Erstelle in den Global Settings (settings_schema.json) eine neue Auswahlmöglichkeit.

Wichtig: Der Value in den Settings muss exakt mit dem Namen übereinstimmen, den du oben bei font-family vergeben hast.

Schritt 4: CSS-Variable verknüpfen

Verbinde den Settings-Wert im CSS mit einer Variable:

--fontFamily: settings.custom_font;

Und weise diese Variable den gewünschten Elementen zu:

h1, h2, h3 { font-family: var(--fontFamily); }

Nun hast du eine individuelle Schriftart, die technisch sauber geladen wird und von jedem Teammitglied ohne Code über die Theme-Einstellungen gesteuert werden kann.

Wenn du Fragen zu diesem Thema hast, melde dich gerne bei uns!