Can't get custom fonts to work

Technical Q&A
,
1

Hello,

I’m trying to include a custom local font, but whatever I try, I can’t get it to work.

I’ve uploaded the font files into my files folder. I’ve added this to my base.css:

@font-face {
font-family: “MyFont”;
src: url({{‘MyFont.otf’ | file_url }}) format(“otf”),
src: url({{‘MyFont.woff’ | file_url }}) format(“woff”),
src: url({{‘MyFont.ttf’ | file_url }}) format(“ttf”);
font-weight: normal;
}

Then I’m adding it to my CSS classes like this:

font-family: "MyFont", sans-serif !important;

When I check the computed font in my Chrome dev tools, I get the expected result:

MyFont, sans-serif

But the actual chosen code is the default sans-serif, not the MyFont one.

I’ve tried:

  • Using the full URL instead of the liquid variable versions
  • Using full URL on a third-party server
  • Using @ import to load the font files
  • Adding the CSS code into my theme code (in the header area)

None of it changed anything, all I get is the default sans-serif, but I can’t get the MyFont to work.

If anyone has any idea left, I’d be very very thankful.

2

Hey @hdewendt

What font are you using? Can you share your store URL and also mention a place where you have tried to apply that font so I can debug too?

Meanwhile, try to update your code to this and see if it works.

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

If it doesn’t then share the details so I can check.

Best,
Moeed

3

Thanks! The font is Source Sans Regular 3. I’m trying to upload a custom local version to ensure it’s GDPR-compliant. This is an example page - the breadcrumb text should be in that font:

If I check the computed font, it’s shown correctly, but plugins like FontNinja show it’s actually the sans-serif version.

I added your code and it unfortunately didn’t change anything. We’re using EComposer as a page builder, by the way.

4

Shopify does not run liquid code inside .css assets.

That’s why your url({{‘MyFont.otf’ | file_url }}) stays exactly as it is.

And do not upload your fonts in Assets – they will get corrupted.

My recommended approach is to add a “Custom liquid” section to the Footer section group and put your code (wrapped with <style> and </style> of course) there.

Alternatively, you can edit the layouts/theme.liquid and this would give exactly the same result with the drawback of being less compatible with theme updates.

Finally, you may copy actual file URLs in your Files (there is a button for this) and use them instead of liquid code in base.css.

5

And you need to use the same font-family value in both @font-face declaration and font-family rules!

If you have

@font-face {
  font-family: "Source Sans Pro";
   ...

it must not be

:root{ 
 --font-body-family: "SourceSans3Regular", sans-serif !important;

It needs to be

:root{ 
 --font-body-family: "Source Sans Pro", sans-serif !important;
6

@hdewendt You can follow this video: https://www.youtube.com/watch?v=jj6frF-SW3s

7

This did it! I previously tried using the full file URL in the CSS, and it didn’t work, so I tried various other approaches until I got to this point. Using the file_url variable and just including it in the theme.liquid file finally solved everything.

Thank you so much!