Custom font not showing

Technical Q&A
, , , ,

Topic summary

Issue: A custom font (DIN Condensed Regular) was not rendering on a Shopify draft theme despite following community guides. The user had uploaded font files to the Assets folder and referenced them in theme.liquid using @font-face declarations, with CSS rules applying the font to various elements using !important.

Diagnosis: Browser inspection showed the font was being called but not displaying correctly.

Solution: Moving the font files from the Assets folder to Content > Files and updating the file paths in the @font-face declarations resolved the issue.

Status: Resolved. The font now renders correctly after relocating files and adjusting code references.

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

Hi everyone!

I’m trying to add a custom font to my Shopify site’s new theme (it’s on draft for now). Link: https://jybhyvosnrfce1qc-2085617745.shopifypreview.com. I have followed the steps from here: Solved: Custom Font not showing in Safari / Mobile - Shopify Community. This is my code

theme.liquid

theme.css

body,
h1,
h2,
h3,
h4,
h5,
p,
span,
a,
button {
  font-family: "DIN Condensed Regular", sans-serif !important;
}

This is what I see in inspect

Saba13_0-1747303018935.png

Saba13_2-1747303694444.png
Saba13_2-1747303694444.png523×299 63.2 KB

But the font is not rendering. This is what the right font looks like

Saba13_1-1747303242837.png
Saba13_1-1747303242837.png612×190 7.21 KB

Please help me I have been stuck with this for so long. Any help would be appreciated! Thank you.

2

Hi @Saba13

I hope you are doing well,

Instead of assets, upload font in files and access it from there

Please check if it works for you

Thanks!

3

Thank you so much, this worked for me!

I uploaded all the fonts to the content > files and removed them from the Assets folder on Shopify and I changed my code: