Correctly using custom fonts in separate .css stylesheet

Question

I have downloaded on my computer a .ttf file containing the font I want to use. What I would like to do is to apply it to my html page. I am using a separate .css stylesheet to which there's a link inside the head section of my html file.

How exactly do I apply this custom font? I tried using @font-face and I have the following code in my .css file, but it won't work:

@font-face {
    font-family: "chosenNameForCustomFont";
    src: url("fonts/customFontName");
}

p {
    font-family: chosenNameForCustomFont;
}

The paragraphs in the html file will still be normal, without the font. If I put the above code inside the actual html file, within "style" tags, it works. What am I doing wrong then?

Answer 1

Generally when I need to do this I use the fontsquirrell generator. You need to upload the font you need to use and it will generate an example to use it.

After you generate the font kit you'll get a bundle with several files:

font_name.eot
font_name.svg
font_name.ttf
font_name.woff
font_name.woff2
font_name-demo.html   <-- Open it
stylesheet.css

After you open the .html you'll see your font perfectly working in the sample page. You need to copy all those files (.eot, .svg, .ttf, .woff, .woff2) into your source folder and reference those in your .css (may be you'll need to edit the directory depending on where you put the font files) as the stylesheet.css does:

@font-face {
font-family: 'font_name';
src: url('/relative/path/font_name-webfont.eot');
src: url('/relative/path/font_name-webfont.eot?#iefix') format('embedded-opentype'),
     url('/relative/path/font_name-webfont.woff2') format('woff2'),
     url('/relative/path/font_name-webfont.woff') format('woff'),
     url('/relative/path/font_name-webfont.ttf') format('truetype'),
     url('/relative/path/font_name-webfont.svg#fontnameregular')     format('svg');
font-weight: normal;
font-style: normal;

}

Remember the fonts you are using need to be legally eligible for web embedding.

Hope it helps