Custom Fonts not working in Safari for Dawn 9.0

Store Design
, , , ,
1

Hi all,

I’m running into some issues with custom fonts in Dawn 9.0.

I have followed countless tutorials and have finally gotten the fonts installed and now they look great on Google Chrome…but will not show on Safari. I’ve searched many threads and none of the solutions are working for me. Safari isn’t even using the fallback system font that was assigned in the theme editor, it’s just all times new roman. I’m confused.

I enjoy coding, but this amount of coding to simply change a font is becoming ridiculous. This is the final thing we need to fix before going live. Can someone please help me out?

Here is the preview link to the homepage: https://oicts8asljhfyvce-76742033692.shopifypreview.com

Let me know if you need any additional information!

Thanks in advance

2

Hi @meganchristine
I just looked on your store and found that it does not load the font both Chrome and Firefox.
For now it showing the “Times” font

3

When you want to use a font, there are 2 steps:

  1. Assign font to elements on your page
  2. Download a font file from your server;

First part is done with a CSS rule like:

h2 {
    font-family: "Bebas Neue" !important;
}

which you have done reasonably well in your base.css asset.

Second part is done with CSS font-face clause and this is where you have problems in your theme.liquid layout output:


First, the font-family value must match exactly the value used in the first part and you have "Bebas Neue" vs "BebasNeue".

Second, your src value is off -- the URL in url parameter is duplicated and you use the same file for different formats which makes no sense.

I'd try writing something like:

```css
{% stylesheet %}
  @font-face {
    font-family: "Bebas Neue";
    font-style: "normal";
    src: url({{ "BebasNeue-Regular.woff" | asset_url }}) format("woff"); 
  }
 ...

(provided your font file is uploaded to theme assets?)

Also, there are still rules to load your theme default Montserrat and FjallaOne – do you still use them? If not, delete or select “System fonts” in theme settings instead to avoid unneeded downloads.

And the reason why you could see your fonts in Chrome is that you’ve probably loaded these fonts from somewhere else, like when you were previewing them at google fonts.

Browser caches those and re-uses them even though you were not loading the files from Shopify.

Safari did not have those files cached and if you clear your Chrome cache you will see that it does not work either.

Finally, the easiest could be to just copy a code snippet from Google Fonts and paste into your theme.liquid instead of trying to host these files at Shopify.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

https://fonts.google.com/specimen/Bebas+Neue

1 Like
4

Thank you so much for your detailed response!! I had no idea that I could even link the fonts from Google, its been a while since I’ve worked on Shopify. We ended up installing the Google Font picker and it is working now. Thanks again!!