Adding custom font not working

Solved
Highlighted
Excursionist
35 1 8

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
265 16 41

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 Themes Support | hello@achieveapplabs.com
0 Likes
Highlighted
Excursionist
35 1 8

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
Excursionist
35 1 8

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
Excursionist
35 1 8

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

chrome_Hd7IBYrfWL.png

0 Likes
Highlighted
Excursionist
35 1 8

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

1 Like