Solved

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

erikathedesign
Shopify Partner
4 0 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

 

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

erikathedesign_1-1716345277484.png

 

 

 

Accepted Solution (1)

tim
Shopify Expert
3569 303 1329

This is an accepted solution.

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 <head> (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

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 5 (5)

nickperry
Shopify Partner
1 0 0

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 

 

tim
Shopify Expert
3569 303 1329

This is an accepted solution.

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 <head> (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

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
erikathedesign
Shopify Partner
4 0 1

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! 

tim
Shopify Expert
3569 303 1329

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

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

erikathedesign
Shopify Partner
4 0 1

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