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

Technical Q&A
1

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 }}

add at the very end of section:

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

references: where i found my solution

2

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

3

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.