Custom Font in CSS einbinden

[amyandfriends]

Ihr Lieben, woran kann es liegen, dass eine Custom Font nicht angezeigt wird auch wenn nach Vorgabe die base.css um den entsprechenden @font-face Code erweitert wurde und ttf, woff sowie woff2 Dateien den Assets hinzugefügt wurden?

Die Schrift verändert sich schon, aber einfach in die Times nicht in die Custom Font.

Vielen Dank für Eure Hilfe

[Kai]

Hi Amyandfriends,

ich helfe dir gerne dabei einen Weg zu finden um die von dir gewünschten Schriftarten in deinen Shopify Shop einzufügen.

Hast du dabei diese Anleitung von uns befolgt? Falls nicht, kannst du die relevante Anleitung hier teilen?

An Cache und Cookies, die gelöscht werden müssten liegt es nicht zufällig?

Da du dich gerade mit dem Design deines Shopify Shops beschäftigst, dachte ich kannst du bestimmt auch von diesen Tips zum Thema profitieren. 

[amyandfriends]

Oh super vielen lieben Dank.
Ich habe es nach einer YouTube Anleitung gemacht: hier der Link: https://www.youtube.com/watch?v=Jc8Y4LoFqYg <>

Bei der Anleitung von Shopify selbst habe ich ein paar Fragen:
Dies ist mein Code:

@font-face {
font-family: "GitanLatin-Sb";
src: url ('https://cdn.shopify.com/s/files/1/0648/8293/4028/files/GitanLatn-Sb.ttf?v=1670945730') format ("truetype"),
url ('https://cdn.shopify.com/s/files/1/0648/8293/4028/files/GitanLatn-Sb.woff?v=1670945730') format ("woff"),
url ('https://cdn.shopify.com/s/files/1/0648/8293/4028/files/GitanLatn-Sb.woff2?v=1670945729') format ("woff2"),
}

*,h1,h2,h3,h4,h5,h6,p {
font-family: "GitanLatin-Sb" !important;
}

Ich habe die Schriftdateien unter Einstellungen Dateien hochgeladen und den Link dann in den Code geschrieben.

Oder sollten die ttf. woff. und woff2. Dateien besser im Bereich „Code bearbeiten“ „Assets“ direkt über + neue Assets hinzufügen - hochgeladen werden?

Freu mich über eine Rückmeldung.
Liebe Grüße
AmyandFriends

[amyandfriends]

Lieber Kai,

leider wird auch nach der Shopify Anleitung die Custom Font nicht angezeigt sondern weiterhin die Times. Würd mich riesig freuen wenn Du mir kurzfristig weiterhelfen kannst damit ich den Store freigeben kann. Es fehlt nur noch die Schrift.

Ich habe verschiedene Codevarianten ausprobiert:

/* Custom CSS */

@font-face {
font-family: "Font name";
src: url("{{ '[font-file-name]' | file_url }}") format("[font-format]");
}

/* Custom CSS */

@font-face {
font-family: "GitanLatn-Sb";
src: url("{{https://cdn.shopify.com/s/files/1/0648/8293/4028/files/GitanLatn-Sb.ttf?v=1671176716}}") format ("truetype"),
url("{{https://cdn.shopify.com/s/files/1/0648/8293/4028/files/GitanLatn-Sb.woff?v=1671176716}}") format ("woff"),
url("{{https://cdn.shopify.com/s/files/1/0648/8293/4028/files/GitanLatn-Sb.woff2?v=1671176715}}") format ("woff2"),
}

*,h1,h2,h3,h4,h5,h6,p {
font-family: "GitanLatn-Sb" !important;
}

/* Custom CSS */

@font-face {
font-family: "GitanLatn-Sb";
src: url('https://cdn.shopify.com/s/files/1/0648/8293/4028/files/GitanLatn-Sb.ttf?v=1671176716') format ("truetype"),
url('https://cdn.shopify.com/s/files/1/0648/8293/4028/files/GitanLatn-Sb.woff?v=1671176716') format ("woff"),
url('https://cdn.shopify.com/s/files/1/0648/8293/4028/files/GitanLatn-Sb.woff2?v=1671176715') format ("woff2"),
}

*,h1,h2,h3,h4,h5,h6,p {
font-family: "GitanLatn-Sb" !important;
}

/* Custom CSS */

@font-face {
font-family: "GitanLatn-Sb";
src: url("GitanLatn-Sb.ttf") format ("truetype"),
url("GitanLatn-Sb.woff") format ("woff"),
url("GitanLatn-Sb.woff2") format ("woff2"),
}

*,h1,h2,h3,h4,h5,h6,p {
font-family: "GitanLatn-Sb" !important;
}

keine davon zeigt die eigentliche Schrift an.
Die Schrift verändert sich schon aber immer nur in die Times.

Liebe Grüße

Amy and Friends

[Gabe]

Hey Amy and Friends! @amyandfriends 

Danke für die Angaben und ich sehe du hast auch diese Anleitung bereits gefolgt, wie von Kai empfohlen. Dann siehe einen ähnlichen Beitrag von letzter Woche zu diesem Thema hier.

Custom fonts sind leider etwas problematisch. Kannst du hier deine Shop URL verlinken, so dass ich das anschauen kann?

Custom Fonts werden mehr vom Browser des Betrachters gesteuert. Wenn der Browser deinen Custom Font nicht kennt dann ersetzt der Browser den Custom Font mit einem im Browser eingebauten Standard Font, wie Times. Die meisten Fonts die in Online Webseiten verwendet werden sind die sog. "Web-Safe" Fonts, sprich, Fonts die von allen Browser korrekt gerendert werden.

Ich kann hier nur ein paar Tipps zu den Schritten abgeben und zwar, folgende die du zuerst in einer Themekopie testen solltest.

Navigiere in deinem Theme nochmal zum base.css. Scrolle bis zum Ende der Datei und füge diesen 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

Wie bei den obigen Schritten zum Hochladen ersetzt du die Details durch die Details deiner eigenen Schriftart. Füge unter diesem Code den folgenden Code ein:

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

Copy

Zuletzt gehst du zum Ordner Assets in deinem Shopify-Dashboard und klicke auf Neues Asset hinzufügen. Lade jede Version der Schriftdatei nacheinander hoch.

Eine Anleitung von @oscprofessional  habe ich zu diesem Thema hier gefunden.

---
Lass auch wissen, wenn du weitere Fragen hast zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[amyandfriends]

Lieber Gabe,

vielen Dank für Deine schnelle Rückmeldung, so hat es geklappt zumindest in allen Browsern ausser SAFARI, dort wird noch immer die Schrift mit der Times, also wie DU erklärt hast mit der dem Browser bekannten StandartSchrift, überschrieben.

Mit diesem Code hat es funktioniert:

@font-face {
font-family: "GitanLatn-Sb";
src: url("GitanLatn-Sb.woff2") format("woff2"),
url("GitanLatn-Sb.woff") format("woff");}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3.,.h4,.h5,.h6,p {
font-family: "GitanLatn-Sb" !important;
}

mit diesem Teil hat es nicht funktioniert.

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

Meinst Du das Safari Anzeige Problem lässt sich noch iwie lösen? 
Braucht Safari evtl ne .ttf oder muss ich das als gegeben hinnehmen und damit rechnen das immer wieder, zb: nach Browser Updates die Schrift nicht anerkannt wird.

Das würde natürlich sehr umprofessionell wirken, da das gesamte CI der Marke an der Font ausgerichtet ist.

Ich danke Dir.
Liebe Grüße 

Amy and Friends

[amyandfriends]

Ach ja, eine URL kann ich Dir noch nicht schicken da der Shop noch nicht online freigegeben ist.

[Robert-H]

Moin.

Ich habe schon viele Forumsbeiträge hier zu gelesen und bisher hat keine der Lösungen bei mir funktioniert.

Dazu kommt, dass "Dateien" nicht mehr in den Einstellungen zu finden ist, wie in vielen Beiträgen beschrieben, sondern nach "Inhalt" verschoben wurde.

@Shopify: Es wäre gut, sowas nicht all zu oft zu machen, weil es sonst schwer wird, die Tutorials und Lösungsbeschreibungen nachzuvollziehen.

Auf jeden Fall ging es bei mir jetzt wie folgt:
Unter Inhalt -> Dateien die 2 Dateien (chalofa-regular.woff und chalofa-regular.woff2) hochgeladen und die Links kopiert.

Diese dann im CSS als "src" für die Font-Face Definition eingetragen.

Das hat geklappt, der Browser erkennt den Font nun und zeigt die Vorschau auch in der Netzwerkkonsole korrekt an.

Wenn ich diesen Font über den Asset-Folder hochlade zeigt mir Chrome nicht die korrekte Schriftart an, sondern nur Times New Roman. Sehr komisch. Obwohl die URL korrekt ist.

Was aber auch komisch ist: Wenn ich dasselbe Vorgehen mit dem Font Brother1816 mache, dann funktioniert es "nicht" über die Einbindung durch Inhalt -> Dateien. Allerdings über den Asset-Ordner.

Ich habe auch versuche die 2 woff* Dateien zu konvertieren nach svg, eot, ttf.. aber bei Chalofa hat es nur geklappt über Inhalt -> Dateien.

Seltsam. Aber das wollte ich hier mal ergänzen für alle, die ähnliche Probleme haben.

PS: Warum kann ich hier eigentlich keine JPG-Dateien (Screenshots) hochladen, sondern nur mpp, xls, xlsx, ppt, pptx, csv, mp4? Das macht doch keinen Sinn.

[Gabe]

Hey Robert! @Robert-H 

Für die "Dateien" gibt es in der Tat einen neuen Bereich, dieser wird aber sowohl in den Einstellungen als auch im Help Doc noch als Datein Bereich bezeichnet wie du hier sehen kannst nud somit wollen wir die User ungerne verwirren:

Um JPGs hier im Thread einzufügen, folge meine Schritte hier. Dafür empfehle ich Google Chrome...

[Robert-H]

@Gabe Danke für den Hinweis, habe das JPG jetzt im Text eingebunden 🙂

Aber dein Screen wegen "Dateien" sieht bei mir nicht so aus, da erscheint "Dateien" einfach nicht. Und deshalb auch der Hinweistext nicht.

[Gabe]

@Robert-H 

Super und wenn ein neuer Plattform Feature oder ein Update bzw. Änderung zur Plattform ausgerollt wird, wird es zunächst nur in bestimmte Shops live geschaltet. Es scheint deins ist eines dieser Shops. Die restlichen 80-90% der Shops sehen das noch nicht, bis alle Shops zum "GFA" eines neuen Features gehören ("general feature availability").

Hoffe das hilft! 😉

[Gabe]

@Robert-H 

Der Dateien Bereich wurde jetzt hier hin verschoben: