Custom font in assets not found when used in CSS

Shopify Discussion
1

Hi,

I have following the instructions here to add a custom font to my theme. It uploads OK to the assets and then I add this code to the theme.liquid file:

@font-face {
font-family: "FKScreamer";
src: url({{"FKScreamer-Medium.woff2" | asset_url }}) format("woff2");
}

… and call the font in the css:

h1 {
font-family: "FKScreamer" !important;
}

… but it is not picking up the font - the font changes from the font selected the theme customiser to a default font but not the uploaded font.

I have tried lads of different ways of calling it in the CSS which work with other standard fonts but not the custom font so I think it is just not finding he font itself?

Can anyone help with what might be causing it?

Thanks

2

Yes sure - its an unpublished theme so its on a preview link at the moment - is that enough?

https://4toyergdbcm9zz5q-66750677313.shopifypreview.com

3

May thanks Hustlewithdream - I followed your instructions but it is still not working when using the catch all CSS.

It just seems to not be able to fint the font - is there a way to verify the font has uploaded and is in the right format etc?

Thanks

4

Just as an update to this, the above solution works when linking to shopify system fonts so the process of overwriting the css appears to work fine, its just the uploaded font in the assets folder which does not seem to be being found by the @fontface code.