Wofür brauche ich Custom Fonts?

Ein wiedererkennbares Branding ist unverzichtbar, um sich von der Masse abzuheben und eine starke Markenidentität zu etablieren. Ein wesentlicher Bestandteil davon ist eine individuelle Schriftart, die die Persönlichkeit und den Stil deiner Marke unterstreicht.

Während Shopify einige Schriftarten bereitstellt, ist das Angebot dennoch limitiert. Was also, wenn "deine" Schriftart bei Shopify nicht verfügbar ist? In diesem Artikel erfährst du, wie du deine eigene Schriftart in Shopify nutzen kannst.

Standardschriften in Shopify

In Shopify sind eine Vielzahl von Standardschriftarten bereits verfügbar und können einfach im Shopify Theme Editor ausgewählt werden.

Die Shopify Fonts werden in der Shopify Font Library bereitgestellt. Diese beinhaltet Systemschriften, eine Auswahl von Google-Schriftarten und lizenzierte Schriftarten von Monotype. Einer der wichtigsten Vorteile ist, dass alle Schriftarten kostenlos verwendet werden können.

Darüber hinaus werden sie sowohl im WOFF- als auch im WOFF2-Format bereitgestellt, um eine optimale Kompatibilität mit unterschiedlichen Browsern zu gewährleisten. Für viele Shops sind diese Standardschriften vollkommen ausreichend.

Sollte deine Schrift nicht verfügbar sein, gibt es dennoch die Möglichkeit, eigene Schriftarten zu nutzen.

Anleitung zur Integration von Custom Fonts.

yoffi-digital

So integrierst du deine eigenen Fonts in Shopify

Um deine eigenen Schriftarten in Shopify zu nutzen, stehen dir verschiedene Möglichkeiten zur Verfügung. Im Folgenden werden wir uns diese Möglichkeiten genauer ansehen, damit du einfacher entscheiden kannst, welche für dich am besten geeignet ist.

Shopify Apps

Im Shopify App Store stehen zahlreiche Apps zur Verfügung, die es dir ermöglichen, eigene Schriftarten ohne Programmierkenntnisse hinzuzufügen.

Diese Apps bieten eine benutzerfreundliche Oberfläche, über die du Schriftarten auswählen, anpassen und direkt in deinem Store implementieren kannst.

Mit Tausenden von Schriftarten zur Auswahl ermöglichen sie es dir, deiner Website mehr Persönlichkeit zu verleihen, ohne in den Code deines Stores eingreifen zu müssen. Einige der beliebtesten Apps in diesem Bereich sind:

yoffi-digital

Für Shopify-Nutzer:innen, die in ihrem Shop Custom Fonts nutzen möchten, ohne Codeanpassungen durchführen zu müssen, sind diese Apps eine mögliche Lösung.

Google Fonts

Google Fonts ist eine kostenlose Ressource, die eine große Auswahl an Schriftarten bietet. Shopify bietet bereits viele von Google Fonts an, jedoch nicht alle. Um weitere Google Fonts in Shopify zu verwenden, kannst du die folgenden Schritte befolgen:

Zunächst besuchst du die Google Fonts Website und wählst deine gewünschte Schriftart aus.
Klicke auf den Button „Einbetten“ neben der ausgewählten Schriftart und kopiere den angezeigten Embed-Code.
Gehe zu deinem Shopify-Adminbereich und wähle „Online Store“ > „Themes“ aus. Klicke auf „Actions“ und dann auf „Edit Code“. Öffne die Datei „theme.liquid“ und füge den kopierten Embed-Code in den <head>-Bereich ein.
Suche nach der CSS-Datei, die für die Gestaltung der Schriftarten verantwortlich ist. Dies könnte beispielsweise „theme.css.liquid“ oder „styles.css“ sein. Füge den CSS-Code hinzu, um die neue Schriftart zu verwenden.
Speichere deine Änderungen und veröffentliche dein Theme, um die neue Schriftart auf deiner Shopify-Website anzuzeigen.

Adobe Fonts

Adobe Fonts bietet eine umfangreichere Bibliothek professioneller Schriftarten, die ideal für Brands sind, die bereits Adobe-Produkte nutzen. Um Adobe Fonts in deine Website zu integrieren, kannst du wie folgt vorgehen:

Besuche die Adobe Fonts Website und wähle die gewünschte Schriftart für deine Website aus.
Klicke auf den Button „Web-Einbettung“ neben der ausgewählten Schriftart und kopiere das bereitgestellte Code-Snippet.
Gehe zu deinem Shopify-Adminbereich und wähle „Online Store“ > „Themes“ aus. Klicke auf „Actions“ und dann auf „Edit Code“. Öffne die Datei „theme.liquid“ und füge das kopierte Code-Snippet in den <head>-Bereich ein.
Suche nach der CSS-Datei, die für die Gestaltung der Schriftarten verantwortlich ist. Dies könnte beispielsweise „theme.css.liquid“oder „styles.css“ sein. Füge den CSS-Code hinzu, um die neue Schriftart zu verwenden.
Speichere deine Änderungen und veröffentliche dein Theme, um die neu Schriftart auf deiner Shopify-Website anzuzeigen.

Custom Code

Solltest du eine Schriftart verwenden wollen, die nicht über Google oder Adobe verfügbar ist, besteht die Möglichkeit, Schriftartdateien direkt in Shopify hochzuladen. Dabei werden die Dateien in den „Assets“ des jeweiligen Shops abgelegt.

Hierbei kannst du wie folgt vorgehen:

Erstelle eine Datei namens „font-variables.liquid“ oder ähnlich.
Definiere CSS-Variablen für die Use Cases der Fonts, zum Beispiel:
--heading-font:
--text-font:
Ordne die richtigen CSS-Klassen und Tags den entsprechenden Fonts zu. Zum Beispiel erhalten h1, h2 usw. die Klasse headline, während p, body usw. text-font bekommen.
Definiere benutzerdefinierte Klassen für eine spezielle Schriftart oder Schriftstärke. Diese Lösung bildet die Ausnahme von den Regeln, um Akzente setzen zu können.
Danach solltest du die neu erstellte Datei, welche die Fonts einbindet, in die „theme.liquid“ einbinden, damit die Anbindung zu CSS funktioniert.
Testen

Welches Dateiformat nutze ich und wo baue ich es ein?

Wenn du eigene Schriftarten in Shopify einbetten möchtest, unterstützt Shopify verschiedene Dateiformate. Die gängigsten Formate, die du verwenden kannst, sind folgende:

TTF (True Type Font)
OTF (Open Type Font)
WOFF (Web Open Font Format)
WOFF2 (Web Open Font Format 2)

Diese Dateien werden in "Assets" deines Shopify-Themes hochgeladen. Die Einbindung erfolgt dann über CSS-Anweisungen in den Dateien deines Themes, typischerweise in der theme.scss.liquid- oder einer spezifischen CSS-Datei, wie bereits beschrieben.

Beispiele für Shops mit Custom Fonts

yoffi-digital

Fazit: Unsere Empfehlung

Custom Fonts sind ein wirkungsvolles Mittel, um deinem Shopify-Store mehr Charakter und Markenidentität zu verleihen. Eine einzigartige Typografie stärkt das Branding, verbessert die Wiedererkennbarkeit und hebt dich visuell vom Wettbewerb ab.

Apps funktionieren zuverlässig und bieten einen guten Einstieg – besonders für kleinere Shops.

Wer jedoch Wert auf Performance, volle Designkontrolle und saubere Integration legt, sollte auf eine Custom-Code-Lösung setzen. Auch im Hinblick auf Datenschutz empfiehlt es sich, die Font-Dateien im Theme abzulegen und nicht von externen Servern zu laden.