Custom font not working correctly in frontend

Technical Q&A
1 
Hi Shopify Community, 

i am currently trying to customize my fonts in the custom-styles.liquid of the maker luna theme with the code down below. 

Unfortunately the code does not work. 

In the frontend the custom font is not shown correctly in line with the ttf files in assets (it should be bold, but is shown with serifs in the frontend). 

I have searched google and other resources without finding a solution. The theme support cant be contacted. 

Could you please help?

Best
Linda

***********

@font-face {
font-family: "NimbusSanL";
src: url("NimbusSanL-Bol.ttf") format("ttf"),
url("NimbusSanL-Bol.ttf") format("ttf");
}

h1,h2,h3 { font-family: "NimbusSanL"!important;

font-weight: normal;
font-style: normal; }

@font-face {
font-family: "NimbusSanL";
src: url("NimbusSanL-Reg.ttf") format("ttf"),
url("NimbusSanL-Reg.ttf") format("ttf");
}

a, div, input, button { font-family: "NimbusSanL"!important;

font-weight: normal;
font-style: normal; }

@font-face {
font-family: "Italiana";
src: url("Italiana-Regular.ttf") format("ttf"),
url("Italiana-Regular.ttf") format("ttf");
}

p { font-family: "Italiana"!important;

font-weight: normal;
font-style: normal; }
2

Hi @lindase ,

Did you upload the font in Assets?

First, you need to upload the font to Assets: https://i.imgur.com/4xBmJwO.png

Next, change the code of the font face:

@font-face {
	font-family: 'NimbusSanL';
	src:  url('NimbusSanL-Bol.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Italiana';
	src:  url('Italiana-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

Hope it helps!

3

Thanks for your reply @LitCommerce !

Yes, I have uploaded the fonts in assets.

Unfortunately, your code does not work.

Best

Linda

4

Hi @lindase ,

Please send your site and if your site is password protected, please send me the password. I will check it for you.