Custom font adding woff files

Store Design
,

Topic summary

A store owner is experiencing inconsistent font rendering across browsers after a developer added custom fonts using TTF files. They’ve now uploaded WOFF and WOFF2 versions and need help implementing them correctly.

Solution provided:

  • Upload .woff and .woff2 files to the Assets folder in Shopify theme code
  • Add @font-face declaration in theme.css or base.css using Shopify’s Liquid syntax:
    @font-face {
  font-family: 'CustomFont';
  src: url('{{ "CustomFont.woff2" | asset_url }}') format('woff2'),
       url('{{ "CustomFont.woff" | asset_url }}') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
  • Apply the font to desired elements (e.g., body { font-family: 'CustomFont', sans-serif; })

Key points:

  • WOFF2 provides modern browser support with WOFF as fallback
  • TTF files cause inconsistency due to varying browser support
  • Multiple developers requested store URL access for theme-specific implementation

The discussion remains open as the store owner is sharing details privately rather than publicly.

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

Hello, we had a developer add a custom font to our site.

The files which were uploaded were ttf files, and we are seeing inconsistent fonts across various browsers.

We’ve now uploaded woff and woff2 versions of the font to our content files, and we’d like someone to help with adding the woff files, and pointing in the code to hopefully fix the consistency issue.

Could anyone please help!

Thank you!

1 Like
2

Hi @WILKS ,

Please share your store URL (and the password if it’s password protected). I’ll review it and provide you with the exact solution.

Thank you!

3
  1. Go to Online Store > Themes > Actions > Edit Code
  2. In the Assets folder, upload your .woff and .woff2 font files (For example: CustomFont.woff and CustomFont.woff2)
  3. In teme.css or base.css add below code:
    @font-face {
    font-family: ‘CustomFont’;
    src: url(‘{{ “CustomFont.woff2” | asset_url }}) format(“woff2”),
    url(’{{ “CustomFont.woff” | asset_url }}) format(“woff”);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }

Replace ‘CustomFont’ with your font name.

  1. Now apply the font to the elements you want , for example:
    body {
    font-family: ‘CustomFont’, Arial, sans-serif;
    }

By following above you can add new font to your website. WOFF2 is supported by most modern browsers, WOFF is the fallback for older browsers.

1 Like
4

Hi @WILKS ,

Inconsistency is happening because not all browsers support TTF files the same way. Using WOFF and WOFF2 is the right approach, as they are widely supported and optimized for the web. Here’s how you can fix it:

  1. Upload the font files
  • Make sure your .woff and .woff2 files are uploaded to your Shopify Assets folder (e.g., Assets/custom-font.woff2).
  1. Update your CSS to use the new files
  • Add a @font-face declaration in your theme’s CSS (e.g., base.css or theme.css):
@font-face {
    font-family: 'CustomFont';
    src: url('{{ "custom-font.woff2" | asset_url }}') format('woff2'),
         url('{{ "custom-font.woff" | asset_url }}') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'CustomFont', sans-serif; /* Apply your font where needed */
}
5

Hey @WILKS,

Can your please share your store url along with the password so that I can take a look into it.
Thanks

6

Hey, thanks for your response. We have sent PM

7

It will be better if you can share store URL in this topic, as each theme has different styles of codes and this needs to be checked specifically.

8

Hi @WILKS

Ok dear, please share your store URL and collaborator code with me so I can check and provide you with the proper solution.

Best regards,
Devcoder :laptop: