Adding custom font not working

Solved
Rocking
Explorer
45 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?

 

 

0 Likes
achieveapplabs
Shopify Partner
497 39 78

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
0 Likes
Rocking
Explorer
45 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');
} 

 

0 Likes
Rocking
Explorer
45 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

0 Likes
Rocking
Explorer
45 1 12

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

chrome_Hd7IBYrfWL.png

0 Likes
Rocking
Explorer
45 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.

0 Likes
Rocking
Explorer
45 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.

0 Likes
Bronbron
New Member
2 0 2

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