Why can't I apply a custom font to my theme?

Shopify Discussion
1

I’ve been trying to use a custom font, but no matter what I try it doesn’t show on the page, so i thought I could ask some help here.

I tried uploading the file to the assets folder and included it like this

@font-face {
  font-family: 'Font-name';
  src:  url('{{ "Font-name.woff2" | asset_url }}') format('woff2'),
      url('{{ "Font-name.woff" | asset_url }}') format('woff'),
      url('{{ "Font-name.eot" | asset_url }}') format('eot'),
      url('{{ "Font-name.ttf" | asset_url }}') format('ttf');
}

but it doesn’t work. I also uploaded the files to Content → Files, and copied the full URL from there, but it’s the same thing.

I pasted the font url in the browser to make sure it’s valid, and it is, the file is downloaded just fine.

I made a simple html page (outside shopify) and used the font, to make sure there isn’t a problem with the font files themselves, and there the font shows up just fine in all browsers - just to specify, the font is not installed on my system, the files where only present in the same folder as the css file.

I have tried this with two different fonts, and they both have the same issues.

One of the fonts was (and still is) successfully used on a shopify 1.0 theme, the problems seem to be with a new 2.0 theme, so maybe there’s something here I’m missing.

2

Hi @Ana_Maria

Did you upload those font’s files to your Assets folder of your theme?

3

Hi,

as I mentioned in the post I uploaded them both to the Assets folder and the Files folder, and tried including them from both sources (not at the same time, obviously). Neither worked. I also tried using the font file urls in the browser, to make sure it’s correct, and it is.

4

Hi @Ana_Maria

Make sure you add “!important;” in code when adding font family for elements so it can replace default font of the theme. Example:

h2 {
font-family: 'Font-name' !important;
}
5

Unfortunately that doesn’t work. The css instruction is loaded just fine, when I select “inspect element” the active instruction is the one with the custom font. And the page doesn’t show the default theme font, it shows my default system font, like it’s trying to load the custom font but doesn’t find it.