Some Custom Fonts Not Displaying Correctly

[INVB]

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.

[Arif_Shopidevs]

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