Why isn't my uploaded WOFF font file working on my store's theme?

[balthashop]

Hello!

I need to use a font which does not exist on Google Fonts, so I have uploaded a .woff file to my assets folder.

And in the theme stylesheet I'm defining the font like this:

@font-face {
  font-family: 'Favorit';
  src: url('Favorit.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}

(I also tried without font-style and font-weight.)

I can see that Favorit.woff is being loaded correctly in the network tab in the browser dev tools. I have also verified that the right font-family is assigned, like this:

font-family: Favorit, sans-serif

However in the store, the font file is not being applied. Instead I'm seeing the default sans-serif fallback font.

To verify the file, I have tried creating a simple html file locally which loads and displays the very same file correctly, so there is nothing wrong with the .woff file itself.

Is there any reason why Shopify would not apply a font file in this way?

[beauxbreaux]

Could you share the URL? Also if you could let me know a sample of text that is supposed to have this style applied? Everything that you have stated is how you set up fonts within Shopify, I just want to check these elements directly to see if they are being overwritten. Also is all of your text elements supposed to be using this font or just some?

[balthashop]

Hi Beaux, thanks for your reply!

Here's a link to the development store in question.
https://heir-brand.myshopify.com

The current password is: lainga

As you can see there is almost nothing on there, I'm still in the initial steps of setting this up, hence the font conundrum 🙂

To give you a little bit more context, below is my full custom CSS. As you can see, what I am actually doing is that I am overwriting two CSS variables which are set by the theme I'm customizing. You'll be able to see that for example "Browse our latest products" has "--font-heading-family" as its value, and if you inspect that variable you'll see it has correctly been overridden with "Favorit". This means that the CSS below is correctly loaded.

The expected result is that fonts should be substituted throughout the page. Instead all fonts are now just default sans-serif fallback fonts.

As further proof that the CSS is loaded is that if I change it to --font-heading-family: "Futura", then I see Futura applied to the titles, but only because I have Futura installed locally.

You should also be able to see in the network tab that Favorit.woff is loaded without errors.

Important: if you have Favorit or DiatypeRounded installed on your machine you won't see the problem, as the browser will instead fall back to your local files.

Hope that makes sense! And thanks again for taking a moment to help out with this.

@font-face {
  font-family: 'Favorit';
  src: url('Favorit.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'DiatypeRounded';
  src: url('DiatypeRounded-Light.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}

:root {
    --font-heading-family: "Favorit", sans-serif;
    --font-body-family: "DiatypeRounded", sans-serif;
}

[balthashop]

Quick update, something kind of nuts happened.

Accidentally using this incorrect type of comment made it so that some of the fonts are applied. If I remove the comments, it no longer works.

// Override font variables
:root {
    --font-heading-family: Favorit, sans-serif;
    --font-body-family: DiatypeRounded, sans-serif;
}

However, in one specific case the right font is still not being applied.
The font below is not being specified. Again, in the network tab I can see the font file being downloaded.

@font-face {
font-family: 'Idlewild';
src: url('Idlewild-Bold.woff') format('woff');
}

.banner--medium h2.banner__heading {
font-family: Idlewild, sans-serif;
}