Adding custom font not working

Solved
Highlighted
Explorer
45 1 10

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
Highlighted
Shopify Partner
397 28 61

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

 

Custom Apps and Theme Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Hosted solutions | Lifetime support
0 Likes
Highlighted
Explorer
45 1 10

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
Highlighted
Explorer
45 1 10

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
Highlighted
Explorer
45 1 10

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

chrome_Hd7IBYrfWL.png

0 Likes
Highlighted
Explorer
45 1 10

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

Highlighted
Tourist
4 0 0

@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

0 Likes