Eigene Schriftart codiert klappt nicht bei Safari oder Handy

[Palou]

Hey,

ich habe eine eigene gekuafte Schriftart "Versailles" im Onlineshop unter base.css codiert.

Dafür habe ich drei verschiedenen Formate verwendet - ttf, WOFF, WOFF2 - damit es bei Safari, Firefox etc. umgesetzt wird.

Dafür habe ich folgenden Code verwendet:

@font-face {
font-family: "Versailles";
src: url('eigener Link') format("woff"),
url('eigener Link') format("woff2"),
url('eigener Link') format("truetype"),
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;

}

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

Dies klappt bei Firefox einwandfrei. Allerdings wird mir die eigene Schrift nicht bei Safari oder auf dem Handy angezeigt. Woran liegt das? Was ist in der Codierung falsch?

Ich freue mich über eure Hilfe. Vielen Dank im Voraus!

[Gabe · Accepted solution]

Hey @Palou 

Danke  für die Beschreibung und das Problem mit Custom Fonts und Safari ist vielen bekannt und nicht leicht zu beheben sowie Theme-dependent.

Das beste hier wäre es für dich ein paar Leitfaden zu verlinken die genau das Thema besprechen:

• Add custom fonts to your Shopify theme [Complete Guide]
• Custom Font Not Showing In Safari / Mobile
• Custom Font On Shopify Not Loading On Safari Browser
• Weitere Leitfaden hier

Habt ihr schon über Ostern nachgedacht? Warum nicht etwas "Easter Egg Gamification" im Vorfeld Osterns in den Shop einbauen? Man kann z. B. eine Annonce auf der Homepage zeigen, dass Oster Eier im Shop versteckt sind und wenn diese gefunden werden, werden sie automatisch als Geschenk zum Warenkorb ergänzt. Gerne können wir hier weiter darüber plaudern!

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