Adding custom font not working

Solved
Rocking
Explorer
49 1 12

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)

Accepted Solutions
Rocking
Explorer
49 1 12

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 11 (11)
achieveapplabs
Shopify Partner
512 39 85

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

 

Use Approovly to create and track order approvals | Looking for more Shopify apps? achieveapplabs.com/#apps
Rocking
Explorer
49 1 12

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 12

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 12

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

chrome_Hd7IBYrfWL.png

Rocking
Explorer
49 1 12

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
New Member
1 0 0

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

Rocking
Explorer
49 1 12

I posted the solution on 05-12-20:

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

Bronbron
New Member
3 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

KarinKaufer
New Member
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.

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