All things Shopify and commerce
I'm not able to get a font to work.
These are the steps I took:
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;}
{{ 'custom-stylesheet.css' | asset_url | stylesheet_tag }}
.font-free{ color: #03C481; font-family: "bird_and_thornregular"!important; font-size: 73px; font-weight: normal; text-transform: none; }
<h2><b>Limited time <span class="font-free">offer!</span></b></h2>
The word is changing color but not font:
It's supposed to look like the word "Only" here:
What am I doing wrong?
Solved! Go to the solution
This is an accepted solution.
I fixed it. The @font-face needed to go into a .liquid file and not a css file.
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
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'); }
I tried uploading from a different source but Shopify is giving a 404 error and is not loading the font files.
Ok, I fixed the 404 error (had a problem with a ") but font is still not loading.
This is an accepted solution.
I fixed it. The @font-face needed to go into a .liquid file and not a css file.
@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).
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
Can you please explain more how you got this solution? Really appreciate the help.
I posted the solution on 05-12-20:
The @font-face needed to go into a .liquid file and not a css file.
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
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! 😞
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
^^^ This, folks! ^^^
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.
@Rocking in which ".liquid " file did not get-it places explain
theme.liquid or theme.css.liquid ??
We have a guide here on how to properly add a custom font: https://exhibea.com/blogs/shopify-plus-blog/change-font-shopify
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024