Inserting CSS font with Font-face Technology

[SaschKo (Sascha Ko)]

Hello everyone,
I have the following problem. I got myself a template and bought fonts from a type foundry. I now have to integrate these fonts with Font-Face-Technology.

I have created variables for the font families in the template itself. These are integrated in all elements, be it headings, paragraphs etc.

Now I have to insert a costum CSS code. This is completely new for me. And here I need your help. I have summarised the code. Is it correct? For the path at Source, I have only inserted a placeholder as the name.

For the body, I then listed all 3 variables and added the respective fontfamily.

@font-face { 
	font-family: FontName1; 
	src: url('Source'); 
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face { 
	font-family: FontName2; 
	src: url('Source');
	font-weight: 900;
	font-style: black;
	font-display: swap;
}

@font-face { 
	font-family: FontName3; 
	src: url('Source');
	font-weight: 700;
	font-style: bold;
	font-display: swap;
}


body { 
	font-text: 'FontName1', Helvetica, Arial, sans-serif; 
	font-semidisplay: 'FontName3', Helvetica, Arial, sans-serif;
	font-display: 'FontName2', Helvetica, Arial, sans-serif;
}

Another question would be. Where do I have to insert the code everywhere?

[sam-g]

@SaschKo - just add it in Site Settings under Custom Code in the head area:

However, I would recommend installing the font directly in your project, also in Site Settings by going to Fonts. Just upload the files, I believe WOFF/WOFF2 is the preferred format these days, but any of the types listed in the note on the right will work. That way it will show up in your font menu in Webflow and you won’t have to write custom css everywhere.