Some Custom Fonts Not Displaying Correctly

Store Design
, ,

Topic summary

Issue: A third custom font (VelvetScript) won’t render on the storefront and falls back to a generic cursive font, while two others (Colgent, Montserrat) work.

What was tried:

  • CSS test: h1 using “Colgent” loads correctly; switching to “VelvetScript” triggers a fallback.
  • @font-face blocks added in theme.liquid for both fonts; VelvetScript listed with woff, woff2, and ttf sources. Font files were uploaded under Assets.
  • The @font-face src entries for VelvetScript reference admin.shopify.com URLs wrapped with the asset_url filter.

Current behavior: VelvetScript does not load when specified via font-family; browser displays a generic cursive fallback.

Advice received: Use woff2 format because ttf isn’t widely supported across browsers. The reply suggests switching to woff2 to resolve the issue.

Status/outstanding: No confirmation that the woff2-focused change fixes the problem. It remains unclear whether the font file paths/URLs or formats are the root cause. Discussion appears open with unresolved steps to verify correct asset references and successful loading of VelvetScript.

Summarized with AI on December 27. AI used: gpt-5.
1

Hi,

I have added 3 custom fonts to my website. 2 of them work perfectly (Colgent and Montserrat) as soon as I change the font name to the 3rd one (VelvetScript) in Theme Settings > Custom CCS on my site, it just reverts to a generic font.

If I test the following, it works - the heading is changed to Colgent Font:

h1 {
font-family: “Colgent”, serif;
font-weight: 400;
font-style: normal;
}

If I change it to the following, it does not show VelvetScript, instead a generic cursive font:

h1 {
font-family: “VelvetScript”, cursive;
font-weight: 400;
font-style: normal;

}

I saved the following under theme.liquid:

@font-face {
font-family: “Colgent”;
src: url(“{{ //admin.shopify.com/store/31d344-40/themes/169165160730?key=assets%2FColgent.ttf’ | asset_url }}”);
format(“truetype”);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: “VelvetScript”;
src: url(“{{ https://admin.shopify.com/store/31d344-40/themes/169165160730?key=assets%2FVelvetScript.woff’ | asset_url }}”);
format(“woff”);
url(“{{ https://admin.shopify.com/store/31d344-40/themes/169165160730?key=assets%2FVelvetScript.woff2’ | asset_url }}”);
format(“woff2”);
url(“{{ https://admin.shopify.com/store/31d344-40/themes/169165160730?key=assets%2FVelvetScript.ttf’ | asset_url }}”);
format(“truetype”);
font-weight: normal;
font-style: normal;
}

And saved the files under the assets tab.

Any help will be much appreciated. It just doesnt make sense why one font doesnt work but others do.

2

Please use woff2 formate, ttf is not support many browser.
It will solve your issue