Schrift / Font vom eigenen PC nutzen

[pappe]

Hallo zusammen,

ich verwende das gratis Theme JUMPSTART und möchte meine eigenen Schriften die zu meinem Corporate Design gehören benutzen, wie kann ich sie hochladen?

Geht das überhaupt? Bin gerade verzweifelt...

[Gabe · Accepted solution]

Hi @pappe 

Vielleicht helfen dir diese 2 Hilfeseiten weiter:

- https://help.shopify.com/de/manual/using-themes/themes-by-shopify/jumpstart#textspalten-mit-symbolen...

- https://help.shopify.com/en/themes/development/fonts

Wie man sieht, gibt es auch ein paar Limitationen, da Shopify generell nur sog. "Web-Safe" oder Google Fonts verwendet, um Font Wiedergabe- sowie Lade-Problem auf dem Shopfront zu vermeiden auf verschiedene Browser.

Gabe

[Marius_Schmidt]

Hi Gabe, 

kannst du mir weiterhelfen?
Ich habe eigene Fonts als Asset Datei hochgeladen. Im Shopify Theme Editor wird mir auch alles richtig angezeigt, allerdings nicht, wenn ich im Inkognito Modus auf die Seite zugreife. 

Vielleicht kannst du mir weiterhelfen.

Anbei der Code und die Ansicht im Shop.

Beste Grüße

Marius

[Marius_Schmidt]

[Gabe]

Hey Marius!

Das ist ein schwieriges Thema. Hast du unsere Anleitung hier verwendet?

Lade die Webfont-Version deiner Schriftart herunter. Die Schriftdateien müssen mindestens die Dateitypen WOFF und WOFF2 enthalten (TTF oder OTF sind keine Webfont-Dateitypen).

In einer Themekopie zuerst - gehe zu Assets > theme.scss.liquid. Scrolle zum Ende der Datei und füge den folgenden Code ein:

@font-face {
font-family: "NAME OF FONT";
src: url("NAME-OF-FONT-FILE.woff2") format("woff2"),
url("NAME-OF-FONT-FILE.woff") format("woff");
}

Copy

Ersetze NAME OF FONT mit dem Namen deiner Schriftart und NAME OF FONT-FILE mit dem genauen Namen (Groß- und Kleinschreibung mit Bindestrichen) der Schriftdatei auf deinem Rechner. Füge unter diesem Code auch den folgenden Code ein:

<p><span style="font-weight: 400;">yourcssselectorhere { font-family: "NAME OF FONT"!important; }</span></p> 

Copy

Im Ordner Assets, klicke auf Neues Asset hinzufügen. Lade jede Version der Schriftdatei nacheinander hoch.

Jetzt, wo die Schriftart installiert ist, dem Theme mithilfe von Code mitteilen, welche Überschriften oder Texte die neue Fonts verwenden sollen. Gehe in einem neuen Browser-Tab auf deine Website und suche die Überschrift oder den Text, den du in dieser Schriftart haben möchtest, in diesem Beispiel - eine Überschrift. Klicke mit der rechten Maustaste auf den Text und wähle das Inspect Tool in Google Chrome.

Es öffnet sich ein Fenster, das dir die Code Elemente der Website zeigt. Suche in der Elements Spalte nach dem CSS-Code, der deine Überschrift stilisiert. Im obigen Beispiel siehst du links, grau unterlegt, dass die Überschrift ein <h2> ist und rechts ist der CSS-Eigenschaftsselektor für die Überschrift h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6. Klicke auf den Property Name und kopiere den Text.

Gehe zurück zum Browser-Tab mit dem Theme-Code-Editor und öffne die Datei theme.scss.liquid erneut. Wähle die Worte "yourcssselectorhere" aus und füge das ein, was du bereits kopiert hast. Ersetze dann "NAME OF FONT" durch den Namen, den du zuvor verwendet hast.

Speichere deine Änderungen in der Theme Kopie, aktualisiere sie und sieh dir deine benutzerdefinierte Schriftart an in der Vorschau an.

Bei weiteren Fragen bitte einen Experten konsultieren wie storeinspector.io. Gerne kann ich auch andere Experten empfehlen.