Fügen Sie Ihrem Shopify-Theme benutzerdefinierte Schriftarten hinzu

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 ist eine Anleitung, wie es geht:

1. 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.

2. 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.

   

3. 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.

   

4. Kehren Sie als Nächstes zu Ihrem Admin-Dashboard zurück, klicken Sie auf Online-Shop > Themen und wählen Sie das Thema „Be Yours“ aus, um es weiter zu bearbeiten. Klicken Sie auf ... > Code bearbeiten .

   

5. 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.

   

6. 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:

    @font-face {
    font-family: "MyFontHeading";
    src: url(' add your font file link ') format("woff2"),
    url(' add your font file link ') format("woff");
    }
   
    @font-face {
    font-family: "MyFontBody";
    src: url(' add your font file link ') format("woff2"),
    url(' add your font file link ') 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.

   

7. Danach:

   • Suchen Sie 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“).

   • 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 zu ersetzen (in unserem Beispiel ist dies der Fall). „MyFontHeading“)

8. Nach dem Ersetzen wird der kommentierte Code im roten Feld durch den Code im grünen Feld ersetzt. Es sieht aus wie auf dem folgenden Foto:

   

9. 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.

Benötigen Sie weitere Unterstützung

Wenn Sie auf Probleme stoßen oder zusätzliche Hilfe mit Ihrem BeYours-Theme benötigen, wenden Sie sich bitte innerhalb von 8 Stunden über unser Ticketsystem an unseren Support.

Scannen Sie den QR-Code unten, um unserer WhatsApp-Community für Updates, Neuigkeiten und Ankündigungen beizutreten.