Some Custom Fonts Not Displaying Correctly

INVB
Not applicable
1 0 0

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.

Reply 1 (1)

Arif_Shopidevs
Shopify Partner
141 18 14

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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers