Custom font problem

Store Design

Topic summary

A user encountered a font rendering issue where their custom CircularStd-Medium font appeared different on their website compared to the preview on the font provider’s website. Screenshots were provided showing the discrepancy.

Solutions offered:

  • Add proper asset URL references: The original code was missing Shopify’s asset_url filter. The corrected code should use {{ "CircularStd-Medium.woff2" | asset_url }} format to properly reference uploaded font files.

  • Include font-weight and font-style: One suggestion recommended adding font-weight: 500 and font-style: normal properties to the @font-face declaration for better rendering.

  • Alternative approach: Place the @font-face rules in theme.liquid’s <head> section using absolute URLs to the font files.

Important caveat: A later response warned against using Shopify’s theme assets folder for font files, as Shopify’s documentation indicates files may be corrupted during upload. The recommended approach is to use Shopify’s Files section instead, combined with the file_url filter in a Custom Liquid section.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
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.