Resolved: Adding custom font in code not displaying on the page

nicohalsema · ‎05-27-2025

Issue: I added the font file to the Assets folder, updated the code, checked the devtools and it was showing a network status code of 200. The item told me it was displaying the correct font, but the font visibly remained a default.

Reason: There is an internal Shopify bug that's been around since at least 2022 that corrupts woff files on load to the assets.

Solution: Add the font to the Files folder and call it from there.

Add to this folder -> https://admin.shopify.com/store/*store code*/content/files

Use code like this:

Add just below {{ content_for_header }}

<style>
      /* 1. declare font */
      @font-face {
        font-family: 'Maka';
        src: url('{{ 'https://cdn.shopify.com/s/files/files/Maka.woff' }}') format('woff'), 
        src: url('{{ 'https://cdn.shopify.com/s/files/files/TAYMakawaoRegular.woff2' }}') format('woff2')
      }
</style>

add at the very end of <head> section:

<style>
/* 2. At the end of all things, override the CSS variable. placing this at the bottom makes it the top priority. */
:root {
--font-heading-family: 'Maka';
}
</style>

PS. always make sure that you have a backup font file like a woff2. Browsers like it.

references: where i found my solution

BiDeal-Discount · ‎05-27-2025

Hi @nicohalsema

Please attach your store url & password (if applicable) each time you post a question to let me check then give you the solution

- Helpful? Like & Accept solution! ☕ Coffee tips fuel my dedication.
- BiDeal Bundle Volume Discounts: Upsell with discount bundles, quantity breaks, volume discounts & mix-and-match bundles. AOV+ with free gifts, free shipping & progressive cart
- Contact me via WhatsApp

tim · ‎05-28-2025

Yep, that's a pity Shopify started doing this and still not fixed.

Though, I guess it may be another reason to avoid modifying your theme code.

All of this can be done with "Custom CSS"/"Custom liquid" settings -- will help with future theme updates.

If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

Resolved: Adding custom font in code not displaying on the page

Resolved: Adding custom font in code not displaying on the page

Community Blog Articles