Solved

Why isn't my custom font displaying correctly on Shopify?

Rocking
Explorer
49 1 15

I'm not able to get a font to work.

These are the steps I took:

 

  1. I added two .woff files to my assets.

  2. I added a custom-stylesheet.css in assets with this code:
    font-family: 'bird_and_thornregular';
    src: url("{{ 'bird_and_thorn-webfont.woff2' | asset_url }}"),
    url("{{ 'bird_and_thorn-webfont.woff' | asset_url }}");
    font-weight: normal;
    font-style: normal;}
  3. I included the custom stylesheet in theme.liquid:
    {{ 'custom-stylesheet.css' | asset_url | stylesheet_tag }}
  4. Created the class for this font:
    .font-free{
    color: #03C481;
    font-family: "bird_and_thornregular"!important;
    font-size: 73px;
    font-weight: normal;
    text-transform: none;
    }
  5. Added the HTML on the page I wanted one word to change to that font:
    <h2><b>Limited time <span class="font-free">offer!</span></b></h2>

The word is changing color but not font:

 

chrome_aKRQqk8dlu.png

 

It's supposed to look like the word "Only" here:

 

chrome_GG1yJFiw6Z.png

 

What am I doing wrong?

 

 

Accepted Solution (1)
Rocking
Explorer
49 1 15

This is an accepted solution.

I fixed it. The @font-face needed to go into a .liquid file and not a css file.

 

ShareX_swdJm5OoLg.png

View solution in original post

Replies 15 (15)

Not applicable

Hi @Rocking,

 

Believe you're missing the font-face CSS rule for custom fonts. 

 

 

@font-face {
    font-family: 'bird_and_thornregular';
    src: url(''); /*URL to font*/
}

That URL should point to the .woff files. 

 

Let us know how that works out or if you need more info.

 

Best,

 

Sam

 

Rocking
Explorer
49 1 15

I do have the source in custom-stylesheet.css

 

@font-face {
    font-family: 'bird_and_thornregular';
    src: url("{{ 'bird_and_thorn-webfont.woff2' | asset_url }}"),
         url("{{ 'bird_and_thorn-webfont.woff' | asset_url }}");
    font-weight: normal;
    font-style: normal;

}

 I also tried to use a source from someone else's Wordpress site (the site that I got my original screenshot from) but it didn't work either.

Here's what I tried: (yes, I changed the font name in my code accordingly)

 @font-face {
  font-family: 'BirdThorn';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://wesmcdowell.com/wp-content/uploads/2019/12/3AB5DB_0_0.eot');
	src: url('https://wesmcdowell.com/wp-content/uploads/2019/12/3AB5DB_0_0.eot?#iefix') format('embedded-opentype'),
		url('https://wesmcdowell.com/wp-content/uploads/2019/12/3AB5DB_0_0.woff2') format('woff2'),
		url('https://wesmcdowell.com/wp-content/uploads/2019/12/3AB5DB_0_0.woff') format('woff'),
		url('https://wesmcdowell.com/wp-content/uploads/2019/12/3AB5DB_0_0.ttf') format('truetype');
} 

 

Rocking
Explorer
49 1 15

I tried uploading from a different source but Shopify is giving a 404 error and is not loading the font files.

 

chrome_nA2e0ax38C.pngchrome_12WihJiAJm.pngchrome_EtRyOS38An.png

Rocking
Explorer
49 1 15

Ok, I fixed the 404 error (had a problem with a ") but font is still not loading.

chrome_Hd7IBYrfWL.png

Rocking
Explorer
49 1 15

This is an accepted solution.

I fixed it. The @font-face needed to go into a .liquid file and not a css file.

 

ShareX_swdJm5OoLg.png

immiike
Tourist
4 0 1

@Rocking how did you solve this problem? 

I want to use a custom font which I uploaded into the Assets folder (I'm using the Debut Theme).

immiike_0-1603899783965.png

 

In the theme.css.liquid file I added the following code

 

 

@font-face {
  font-family: 'alternate-gothic';
  src: url('{{ "Alternate_Gothic_No3_D_Regular.otf" | asset_url }}') format('otf');
}

h1, h1 a, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a { 
  font-family:"alternate-gothic" !important;
}

 

What's generated in my css file when opening the store in the browser is the following

/*================ Custom CSS ================*/

@font-face {
  font-family: 'alternate-gothic';
  src: url('//cdn.shopify.com/s/files/1/0502/4677/9048/t/1/assets/Alternate_Gothic_No3_D_Regular.otf?v=3722300690532067853') format('otf');
}

h1, h1 a, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a { 
  font-family:"alternate-gothic" !important;
}

However the font is not applied in my store. Not sure what I'm missing. 

Thanks for your help in advance!

Kind regards
Mike

devs_love1
Visitor
1 0 0

Can you please explain more how you got this solution?  Really appreciate the help.

Rocking
Explorer
49 1 15

I posted the solution on 05-12-20:

The @font-face needed to go into a .liquid file and not a css file.

Bronbron
Tourist
4 0 4

OMG, I just had this exact same problem. My custom fonts hadn't been working for a month and I'd played with all different kinds of syntax with nothing making a difference. Finally moved the @font-face into its own file with a .css.liquid extension and linked it from theme.js. AND IT FREAKIN WORKED!!!! Halle-bloody-lujah

StephBennett
Shopify Partner
5 0 0

Hello, any chance you can explain more how you did this? I have literally tried everything to get my font files to work and not getting anywhere! I tried adding a .css.liquid file but I don't know what I am doing wrong. It still isn't working! 😞

Edgywebsites
Shopify Partner
18 1 32

If you're still looking for a solution. I've posted my solution in the link below. That might work for you too. Good luck!
https://community.shopify.com/c/shopify-design/font-face-not-working/td-p/1663707

edgywebsites.com
DARING.INNOVATIVE.CUTTING-EDGE.
PaulWilliams
Visitor
2 0 3

^^^ This, folks! ^^^

KarinKaufer
Visitor
1 0 0

Hi! I have the exact same problem, but I add the @font-face on the .liquid file and it shows an error-tag, could you share how did you add that line of code? I'd really appreciate it.

Vikasrp121
Visitor
1 0 0

@Rocking  in which  ".liquid " file did not get-it places explain 
theme.liquid or theme.css.liquid ??

Exhibea_Team
Shopify Partner
8 0 1

We have a guide here on how to properly add a custom font: https://exhibea.com/blogs/shopify-plus-blog/change-font-shopify