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.
 |  |
Sie können die Schriftarten in Ihrem Concept-Design mit einer der beiden folgenden Methoden anpassen:
Liquid-Code bearbeiten (sehr empfehlenswert)
Hier ist eine 9-Schritte-Anleitung, um dies zu erreichen:
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 besorgen.
Bereiten Sie als Nächstes zwei Dateien im Format .woff und .woff2 für jeden hinzuzufügenden Schriftstil vor. Dadurch wird sichergestellt, dass Ihre hinzugefügte Schriftart in allen Browsertypen lesbar ist.
Nachdem Sie über genügend Dateien verfügen, laden Sie diese über [Admin-Dashboard] > [Inhalt] 1 > [Dateien] 2 > [Hochladen] 3 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] 1 > [Themen] 2 > wählen Sie „Concept-Theme“ > klicken Sie auf [Aktion] 3 > [Code bearbeiten] 4 .
Navigieren Sie im geöffneten Codebearbeitungsfenster zum Ordner [Snippets] 1 in der linken Spalte. Klicken Sie in diesem Ordner auf die Datei [css-variables.liquid] 2 , 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-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“)
Nach dem Austausch sieht es wie auf dem folgenden Foto aus:
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.
Verwenden der RoarTheme-App
Während Shopify eine große Sammlung kostenloser Schriftarten bietet, benötigen Sie möglicherweise eine benutzerdefinierte Schriftart, die Ihren Markenrichtlinien entspricht. Wenn Ihre gewünschte Schriftart von Shopify nicht nativ unterstützt wird, machen Sie sich keine Sorgen! Unser Team hat eine App entwickelt, die zahlreiche Optionen zur Schriftartanpassung bietet, um Ihr Webdesign zu verbessern. Entdecken Sie die Möglichkeiten und werten Sie die Ästhetik Ihres Geschäfts mit unserer App auf .
Wir hoffen, dass Sie diesen Artikel hilfreich finden! Wenn Sie Bedenken zu dieser Funktion haben, wenden Sie sich bitte an unser Team, um weitere Unterstützung zu erhalten.
