Custom Font does not show properly in Safari and Mobile Sense Theme

Shopify Discussion
1

Hey everyone, Ive been trying to look everywhere for a solution to this and still zero luck.

My custom font - Nebuih Regular looks different on Google Chrome and Safari

On Google Chrome it looks perfect, but on Safari and Mobile, it doesn’t appear properly.

Would greatly appreciate any help! I have a deadline today and panicking a bit

https://thehair-destination.myshopify.com/

pw:erikathedesigner

Google Chrome - perfect header

erikathedesign_0-1716345147296.png
erikathedesign_0-1716345147296.png1418×770 45.3 KB

Safari - it turns into a serif font, but this isnt the above font whatsoever

erikathedesign_1-1716345277484.png
erikathedesign_1-1716345277484.png1388×724 42.3 KB

2

Hey, Erika

Have you checked if safari is font-smoothing?

https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

Reference this for more info

If you have further questions reach out here

3

Hi Erica,

you can see your font in one of the browsers because you’ve used it to select the font and Chrome cached this font.

The problem with other browsers /devices is that browsers do not know where to get this font from.

Yes, you’ve made edit to your aErikaCustom.css to define proper font-face:

/*FONT STYLING */

@font-face {
  font-family: 'NebuihRegular';
  src: url('{{'NebuihRegular.woff2' | asset_url }}') format ('woff2'),
     url('{{'NebuihRegular.woff' | asset_url }}') format ('woff'),
    url('{{'NebuihRegular.ttf' | asset_url }}') format ('truetype'),
    url('{{'NebuihRegular.otf' | asset_url }}') format ('opentype'),
    
            font-weight: normal !important;
  font-style: normal!important;
  font-display: swap !important;
}

h1, h2, h3, h4, h5, h6, header { 
  font-family: 'NebuihRegular'!important;
}

However, as shown above I can see unprocessed liquid instead of url(s).

If your asset has**.css** extension Shopify would not process any liquid inside, you must rename your asset to be .css.liquid for this. This is kinda discouraged by Shopify, and modern themes define font-faces somewhere in layout, inside (this also has benefit of being processed ASAP for less FOUC).

But as a quick fix, try to simply rename your custom stylesheet asset file to .css.liquid

Also, you have another definition for this font in base.css which is not good and difficult to debug if there are duplicate definitions. Anyway, the code in base.css could work if your font files were uploaded to your theme’s assets/ folder, however, I believe they are uploaded to your store settings-> files area, right?

In this case the liquid code above should use file_url filter instead of asset_url

4

Thank you sooo much for this! I literally spent hours trying to figure it out haha, this only took me 5 mins

I changed the liquid code to a file_url and it worked perfectly!

1 Like
5

:clap: Shows fine for me now, but Still needs attention – I see:

src: 
    url("https://cdn.shopify.com/s/files/1/0700/7892/2972/files/NebuihRegular.woff?v=1716335492") format("woff"),
    url("NebuihRegular.woff2") format("woff2");
    url("NebuihRegular.ttf") format("truetype");
    url("NebuihRegular.otf") format("opentype");

fix the rest of the urls and remove duplicated font-face definition from base.css.

6

I also have an issue with this my search drop down. I cant see the name of the products. Any help would be much apreciated

erikathedesign_0-1716374677966.png
erikathedesign_0-1716374677966.png1740×984 86.4 KB

7

A variation of @tim_1’s solution + changing my file from:
base.css to base.css.liquid worked for me!