Custom Font Not Displaying on Shopify Theme Sense

[Ilyes3]

Hello, I'm trying to use a custom font (Diavlo) on my Shopify store, but it’s not displaying correctly on my Sense theme. I’ve successfully applied it on my PageFly landing page, but it doesn’t appear on the product page built with Sense.

Here’s what I’ve tried so far:

1. Added the @font-face rule in the CSS file:

@font-face {

    font-family: 'Diavlo';

    src: url('https://cdn.shopify.com/s/files/1/0709/9170/8427/files/Diavlo_MEDIUM_II_37.woff?v=1741058115') format('woff');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}

body {

    font-family: 'Diavlo', sans-serif !important;

}

2. Added a preload link in theme.liquid:

<link rel="preload" href="https://cdn.shopify.com/s/files/1/0709/9170/8427/files/Diavlo_MEDIUM_II_37.woff?v=1741058115" as="font" type="font/woff" crossorigin="anonymous">

3. Cleared cache and tested in incognito mode.

4. Checked the browser console and found WebSocket errors and warnings about font preloading not being used.

Despite all these attempts, the font still doesn’t apply to my Sense theme. Any idea what could be causing this?

[Kudosi-Tracy]

Hello @Ilyes3, 

It looks like you've done most of the right steps, but here are a few things to check and try:

1. Verify Font URL & Accessibility

• Open the font URL directly in your browser to confirm it's accessible. If it doesn’t load, there may be an issue with the file location.

2. Check CSS Specificity

• Some Shopify themes have strict CSS rules that override your font. Try making your CSS rule more specific:

body, h1, h2, h3, h4, h5, h6, p, a, span, div {
font-family: 'Diavlo', sans-serif !important;
}

3. Move @font-face to theme.liquid

• Some Shopify themes restrict custom fonts in CSS files. Try moving your @font-face rule inside <style> tags in theme.liquid before </head>:

<style>
@font-face {
font-family: 'Diavlo';
src: url('{{ "Diavlo_MEDIUM_II_37.woff" | asset_url }}') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
</style>

4. Ensure the Theme is Loading Your CSS

• Open your store, inspect the page (F12 > Elements tab), and check if the font is applied. If not, look at the Sources tab to ensure your CSS file is being loaded correctly.

5. Force Reload Fonts in Console

Run this in your browser console and see if the font updates:

document.fonts.ready.then(() => console.log('Fonts loaded!'));

Let me know if this helps!

Best, 

Tracy from Kudosi Reviews

[Arif_Shopidevs]

Hello, @Ilyes3 

There may be different cases causing the issue. The font might be loading correctly, but some CSS could be overriding the custom font, leading to the problem. If you share the store URL, I can check and help you identify the issue.

Thank you!

[Ilyes3]

Hello @Arif_Shopidevs,

What do you think ? "https://meswo.fr/products/meswo-la-brosse-a-dents-naturelle-en-bambou-avec-embouts-de-siwaks-interch..."

[Arif_Shopidevs]

Here is the solution for you.
In your theme or section a css written for font which is wrong It will be

#shopify-section-template--24093498769675__main h1 {
    font-family: "Diavlo", sans-serif;
}

Right now it is set "Diavlo Bold", sans-serif
If you correct this it will show like this.

I think this is what  you are looking

[Ilyes3]

I don't how you did it but i'm still struggling. Can you please explain exactly how to do it ? Im not a dev

[Arif_Shopidevs]

Hello, If you want can do to this in your site. You can send us collaboration access in personal messasge.

Or  got to your theme->edit ->theme.css and then put at the end of the page it will solve it.

#shopify-section-template--24093498769675__main h1 { font-family: "Diavlo", sans-serif;!important }

 
Your font name is wrong , the font is actually Diavlo you declare other name. That is why the problem occured.

[Ilyes3]

Ok for the collaboration access, how i message you ?

[Arif_Shopidevs]

Send you PM

[Arif_Shopidevs]

Please check all font has two type woff and woff2 , woff2 is must need.

 @font-face {
  font-family: Poppins;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("//meswo.fr/cdn/fonts/poppins/poppins_n5.25334cd7ff48c81cfd51a6bc5a81d92a1b4d4501.woff2?h1=YmE5MGUyLTMuYWNjb3VudC5teXNob3BpZnkuY29t&h2=bWVzd28uZnI&hmac=b1f86ecd8f34f519318bbb701735409a13f27d1c0378a4447c03028f3b82ac10") format("woff2"),
       url("//meswo.fr/cdn/fonts/poppins/poppins_n5.fc8eae64d8f1b5d2b8c42b45ddc0749aff4750a6.woff?h1=YmE5MGUyLTMuYWNjb3VudC5teXNob3BpZnkuY29t&h2=bWVzd28uZnI&hmac=94e08a0da0ee7d95a2213f3615aadbf5bb4b278923f1d9fe0ee9070927bf8da6") format("woff");
}

[Arif_Shopidevs · Accepted solution]

In pagefly they add so woff2 is missing

@font-face {
font-family: 'Diavlo BLACK II 37';
src: url("https://cdn.shopify.com/s/files/1/0709/9170/8427/files/Diavlo_BLACK_II_37.woff2?v=1709704761") format("woff2");
font-display: swap;
}@font-face {
font-family: 'Diavlo MEDIUM II 37';
src: url("https://cdn.shopify.com/s/files/1/0709/9170/8427/files/Diavlo_MEDIUM_II_37.woff2?v=1709704762") format("woff2");
font-display: swap;
}@font-face {
font-family: 'Diavlo LIGHT II 37';
src: url("https://cdn.shopify.com/s/files/1/0709/9170/8427/files/Diavlo_LIGHT_II_37.woff2?v=1709704762") format("woff2");
font-display: swap;
}

h1 {
font-family: "Diavlo_MEDIUM_II_37 ", sans-serif!important; /* Exemple d'utilisation */
}
<link rel="preload" as="font" fetchpriority="low" href="https://cdn.shopify.com/s/files/1/0709/9170/8427/files/Diavlo_BLACK_II_37.woff2?v=1709704761" type="font/woff2" crossorigin="">
<link rel="preload" as="font" fetchpriority="low" href="https://cdn.shopify.com/s/files/1/0709/9170/8427/files/Diavlo_MEDIUM_II_37.woff2?v=1709704762" type="font/woff2" crossorigin="">
<link rel="preload" as="font" fetchpriority="low" href="https://cdn.shopify.com/s/files/1/0709/9170/8427/files/Diavlo_LIGHT_II_37.woff2?v=1709704762" type="font/woff2" crossorigin="">

That is why i addded in your site base.css bottom

@font-face {
      font-family: 'Diavlo BLACK II 37';
      src: url("https://cdn.shopify.com/s/files/1/0709/9170/8427/files/Diavlo_BLACK_II_37.woff2?v=1709704761") format("woff2");
      font-display: swap;
    }@font-face {
      font-family: 'Diavlo MEDIUM II 37';
      src: url("https://cdn.shopify.com/s/files/1/0709/9170/8427/files/Diavlo_MEDIUM_II_37.woff2?v=1709704762") format("woff2");
      font-display: swap;
    }@font-face {
      font-family: 'Diavlo LIGHT II 37';
      src: url("https://cdn.shopify.com/s/files/1/0709/9170/8427/files/Diavlo_LIGHT_II_37.woff2?v=1709704762") format("woff2");
      font-display: swap;
    }

      h1 {
  font-family: "Diavlo BLACK II 37", sans-serif!important; /* Exemple d'utilisation */
}

and also in layout/theme.liquide line 266

<link rel="preload" as="font" fetchpriority="low" href="https://cdn.shopify.com/s/files/1/0709/9170/8427/files/Diavlo_BLACK_II_37.woff2?v=1709704761" type="font/woff2" crossorigin="">
<link rel="preload" as="font" fetchpriority="low" href="https://cdn.shopify.com/s/files/1/0709/9170/8427/files/Diavlo_MEDIUM_II_37.woff2?v=1709704762" type="font/woff2" crossorigin="">
<link rel="preload" as="font" fetchpriority="low" href="https://cdn.shopify.com/s/files/1/0709/9170/8427/files/Diavlo_LIGHT_II_37.woff2?v=1709704762" type="font/woff2" crossorigin="">

and now your font work

[DaisyVo]

Hi @Ilyes3 

I checked your homepage and found this font in the code:
Font-family: "Diavlo MEDIUM II 37"
Here’s a screenshot.

Could you confirm if this is correct?

If so, here’s the CSS code:

.product__title h1 {
    font-family: "Diavlo MEDIUM II 37" !important;
}

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

 Result: 

 

I hope this helps

Best,

Daisy

[Ilyes3]

Thank you for your response but it didn't work unfortunately