Search code examples
cssfontstruetype

.ttf files being applied to website

So I have these fonts that we are using. They are Futura-CondensedBold.ttf, Futura-CondensedMedium.ttf, Futura-Medium.ttf, Futura-MediumItalic.ttf. I actually have the files for these fonts. We need to use these on our web site. Now i know how to link fonts from say Google, or typekit as many sites i have created use these. But how do I get the user to download the fonts from this site I am creating since i have the actual font files? I assume i need to create a folder, which i will do in my CSS directory.

Solution

  • Just make a @font-face call to those files in your CSS. I usually throw a "fonts" folder in the assets folder and host the files there. Then just point the font-face src urls to the location of each filetype in that font's folder.

    @font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "FONT NAME";
	src: url("../fonts/FAMILY/FONT-NAME.eot");
	src: url("../fonts/FAMILY/FONT-NAME.eot#iefix") format("embedded-opentype"),
		 url("../fonts/FAMILY/FONT-NAME.svg#SVGFONTNAME") format("svg"),
		 url("../fonts/FAMILY/FONT-NAME.woff2") format("woff2"),
		 url("../fonts/FAMILY/FONT-NAME.woff") format("woff"),
		 url("../fonts/FAMILY/FONT-NAME.ttf") format("truetype");
}

    I hope that answers your question.