Shopify bietet Hunderte von kostenlosen Schriftarten, die Sie für Ihren Shop verwenden können. Sie müssen jedoch eine benutzerdefinierte Schriftart verwenden, um sie an Ihre Markenrichtlinien anzupassen. Diese wird jedoch von Shopify nicht unterstützt. Sie können sie dennoch zu Ihrem Theme hinzufügen. Hier finden Sie eine Anleitung dazu:
Sie müssen zuerst Ihre Schriftart verfügbar haben. Für einige Schriftarten sind Lizenzen erforderlich. Stellen Sie daher sicher, dass Sie diese ordnungsgemäß für Ihre Verwendung erwerben. Unser Support-Team ist nicht dafür verantwortlich, die benötigten Schriftarten zu erhalten.
Bereiten Sie als Nächstes zwei Dateien mit den Formaten .woff und .woff2 für jeden hinzuzufügenden Schriftstil vor. Dadurch wird sichergestellt, dass Ihre hinzugefügte Schriftart in allen Browsertypen lesbar ist.
Wenn Sie genügend Dateien haben, laden Sie diese in den Ordner „Datei“ in den Designeinstellungen hoch.
Alle Ihre hochgeladenen Schriftartdateien verfügen über die Kettenschaltfläche auf der rechten Seite, um den Dateilink für Ihren Kopiervorgang bereitzustellen.
Kehren Sie als Nächstes zu Ihrem Admin-Dashboard zurück, klicken Sie auf Online-Shop > Themes und wählen Sie das Be Yours-Theme zur weiteren Bearbeitung aus. Klicken Sie auf Aktionen > Code bearbeiten .
Navigieren Sie im geöffneten Codebearbeitungsfenster zum Ordner Snippets in der linken Spalte. Klicken Sie in diesem Ordner auf die Datei „css-variables.liquid“, um benutzerdefinierten Code für die neue Schriftart hinzuzufügen.
In der geöffneten Datei „css-variables.liquid“ fügen Sie unter dem Tabulatorstil zusätzliche Codes hinzu. Es ist unter dem Text {%-style-%} zu finden. Die Codes werden wie folgt hinzugefügt:
@Schriftart {
Schriftfamilie: „ MyFontHeading “;
src: url(' Link zur Schriftdatei hinzufügen ') format("woff2"),
url(' Link zur Schriftartdatei hinzufügen ') format("woff"); }@Schriftart {
Schriftfamilie: „ MyFontBody “;
src: url(' Link zur Schriftdatei hinzufügen ') format("woff2"),
url(' Link zur Schriftartdatei hinzufügen ') format("woff"); }Hinweis : Kursiv gedruckte Textabschnitte werden von Ihnen angepasst. Die Anzahl der hinzuzufügenden @font-face{ }-Codes hängt davon ab, wie viele Schriftarten Sie haben.
- Danach suchen Sie nach dem Text „font-body-family“, um zur relevanten Codezeile zu navigieren und alle Teile von {{...}} durch Ihren hinzugefügten Text für „font-family“ in den Codes von Schritt 6 (in unserem) zu ersetzen Beispiel: „MyFontHeading“. Suchen Sie auf ähnliche Weise nach dem Text „font-heading-family“ und ersetzen Sie alle Teile von {{...}} durch Ihren hinzugefügten Text für die Zeile „font-family“ (in unserem Beispiel „MyFontBody“).
- Nach dem Austausch sieht es wie auf dem folgenden Foto aus:
- Klicken Sie abschließend auf Speichern .
Notiz :
- Die Einstellungen unter Designeinstellungen > Typografie sind nicht mehr wirksam, unabhängig davon, was Sie hier konfigurieren, sobald Sie diese Codes in der Datei „css-variables.liquid“ hinzufügen.
- Alle oben genannten Anweisungen gelten, wenn Sie für alle Abschnitte und Blöcke dieselbe benutzerdefinierte Schriftart anwenden. Falls Sie verschiedene Schriftarten für verschiedene Abschnitte oder Blöcke anwenden müssen, wird der Bearbeitungsprozess viel komplizierter. Bitte wenden Sie sich an unser Support-Team, um weitere Hilfe zu erhalten.
Wir hoffen, dass Sie diesen Artikel hilfreich finden! Wenn Sie Bedenken bezüglich dieser Funktion haben, wenden Sie sich bitte an unser Team, um weitere Unterstützung zu erhalten.
