Custom font hosted in theme not working

Store Design

Topic summary

A user is attempting to implement a custom Helvetica Neue font in their Shopify theme by hosting font files (WOFF and WOFF2 formats) and referencing them via @font-face declarations. They’ve added code to both their base.css and theme.liquid files using CDN URLs from Shopify’s Content/Files folder, but the font isn’t displaying.

Current Status:

  • Initial troubleshooting attempt with corrected @font-face syntax provided by another user was unsuccessful
  • The helper requested the website URL to diagnose why the CSS isn’t working

Suggested Next Steps:

  • Apply the font-family property to HTML elements (h1-h6, span, p, a tags) in base.css
  • Share the website URL for further debugging

The issue remains unresolved, with the discussion ongoing to identify whether the problem lies in the @font-face syntax, file paths, or missing CSS declarations.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

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:

@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](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](https://cdn.shopify.com/s/files/1/0845/3521/4408/files/HelveticaNeueLTStd-BdCn.woff2?v=1739634278) }}") format("woff2"); }

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?

2

Hi @clohes_kmc ,

Try to use this code
3

Hey, thanks for reply, but still no luck :angry:

4

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

5

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.