Custom font problem

Store Design
1

Hi on the font website it shows like this

NOT1_0-1726236763265.png
NOT1_0-1726236763265.png985×117 10.4 KB

But when i download and add on my website it looks like this

NOT1_1-1726236785279.png

I have added the woff file in assests and used this code in base

@font-face {
font-family: "CircularStd-Medium";
src: url("CircularStd-Medium.woff2") format("woff2"),
url("CircularStd-Medium.woff") format("woff");
}
 
h1,h2,h3,h4,h5,h6,body,p,a { font-family: "CircularStd-Medium"!important; }
2

Hi @NOT1

Add the @font-face Rule in theme.liquid

  1. Open Online Store → Themes → Edit code.
  2. Open theme.liquid.
  3. Inside the <head> tag, add a <style> block with your font definition:
<style>
  /* Declare the font globally */
  @font-face {
    font-family: "CircularStd-Medium";
    src: url("https://yourwebsite.com/fonts/CircularStd-Medium.woff2") format("woff2"),
      url("https://yourwebsite.com/fonts/CircularStd-Medium.woff") format("woff");
    font-weight: 500; /* Medium */
    font-style: normal;
    /* Optional but recommended */
  }

  /* Apply the font to the specific section */
  h1, h2, h3, h4, h5, h6, body, p, a {
    font-family: "CircularStd-Medium", sans-serif !important;
  }
</style>
3

@NOT1

Try the following code asset url is missing in your code.


@font-face {
  font-family: "CircularStd-Medium";
  src: url('{{ "CircularStd-Medium.woff2" | asset_url }}') format('woff2'), 
       url('{{ "CircularStd-Medium.woff" | asset_url }}') format('woff'); 
}
 
h1,h2,h3,h4,h5,h6,body,p,a { font-family: "CircularStd-Medium"!important; }

Hope this helps!

4

The original post is almost year-old, but anyway, if this bubbles up in search:

Do not use theme assets, Shopify warns against it in their dox – font files may/will be corrupted when uploaded to assets.

Use Files and use “Custom liquid” section to add these CSS rules (to use file_url filter) instead of editing theme code.