Custom font hosted in theme not working

[clohes_kmc]

Hi,

I've been trying to upload a custom font for my site, hosted in my theme using this:
https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts#custom-fonts

I copied this into the top of my base.css file:

@font-face {
font-family: "Helvetica Neue LT Std";
src: url("{{ 'HelveticaNeueLTStd-BdCn.woff' | https://cdn.shopify.com/s/files/1/0845/3521/4408/files/HelveticaNeueLTStd-BdCn.woff?v=1739634278 }}") format("woff"),
url("{{ 'HelveticaNeueLTStd-BdCn.woff2' | https://cdn.shopify.com/s/files/1/0845/3521/4408/files/HelveticaNeueLTStd-BdCn.woff2?v=1739634278 }}") format("woff2");
}

and this into the bottom of my theme.liquid file:

<style>
@font-face {
font-family: "Helvetica Neue LT Std";
src: url("{{ 'HelveticaNeueLTStd-BdCn.woff' | https://cdn.shopify.com/s/files/1/0845/3521/4408/files/HelveticaNeueLTStd-BdCn.woff?v=1739634278 }}") format("woff"),
url("{{ 'HelveticaNeueLTStd-BdCn.woff2' | https://cdn.shopify.com/s/files/1/0845/3521/4408/files/HelveticaNeueLTStd-BdCn.woff2?v=1739634278 }}") format("woff2");
}
</style>

These are the urls:

https://cdn.shopify.com/s/files/1/0845/3521/4408/files/HelveticaNeueLTStd-BdCn.woff2?v=1739634278

https://cdn.shopify.com/s/files/1/0845/3521/4408/files/HelveticaNeueLTStd-BdCn.woff?v=1739634278

Nothing is working... The urls are copied from the files in the Content - File folder.

Can someone point me in any helpful direction?

[abdulmoeed37]

Hi @clohes_kmc ,

Try to use this code

<style>
@font-face {
font-family: "Helvetica Neue LT Std";
src: url("https://cdn.shopify.com/s/files/1/0845/3521/4408/files/HelveticaNeueLTStd-BdCn.woff?v=1739634278") format("woff")
}
</style>

[clohes_kmc]

Hey, thanks for reply, but still no luck 😠

[abdulmoeed37]

okay, can you share your website url so that I can check why css is not working?

[abdulmoeed37]

This should work. Also make changes in your base.css file and don't forget to apply font family to h1,h2,h3,h4,h5,h6,span,p,a tags in your base.css file.