Custom font not showing

[Saba13]

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

<!-- FONTS -->
    <style>
      @font-face {
        font-family: "DIN Condensed Regular";
        src: url('{{ "din-condensed-regular.woff2" | asset_url }}') format("woff2"),
          url('{{ "din-condensed-regular.woff" | asset_url }}') format("woff"),
        url('{{ "din-condensed-regular.ttf" | asset_url }}') format("truetype"),
        url('{{ "din-condensed-regular.svg" | asset_url }}') format("svg"),
        url('{{ "din-condensed-regular.eot" | asset_url }}') format("embedded-opentype");
        font-weight: normal !important;
        font-style: normal !important;
        font-display: swap !important;
      }
    </style>

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

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

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

[pawankumar · Accepted solution]

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!

[Saba13]

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:

<!-- FONTS -->
    <style>
      @font-face {
        font-family: "DIN Condensed Regular";
        src: url('https://cdn.shopify.com/s/files/1/0020/8561/7745/files/din-condensed-regular.woff2?v=1747309308') format("woff2"),
          url('https://cdn.shopify.com/s/files/1/0020/8561/7745/files/din-condensed-regular.woff?v=1747309308') format("woff"),
        url('https://cdn.shopify.com/s/files/1/0020/8561/7745/files/din-condensed-regular.ttf?v=1747309622') format("truetype"),
        url('https://cdn.shopify.com/s/files/1/0020/8561/7745/files/din-condensed-regular.eot?v=1747309308') format("embedded-opentype");
        font-weight: normal !important;
        font-style: normal !important;
        font-display: swap !important;
      }
    </style>