trying to use @font-family

Question

I am making a basic informational website. In my CSS file I have the following:

@font-face {
    font-family: "Nilland";
    src: local('Nilland.ttf');
}

body{
    background: #FFF;
    font-size:14px;
    font-family: Nilland;
}

The .ttf file is in the same directory as the index.html file. Why is this not working?

Answer 1

Put the ttf files in the folder where the css file is. The path in the css file is relative to the css-file, not the html file

Answer 2

You need to include all types of your font instead of only .ttf, should be something like:

@font-face {
font-family: 'Nilland';
src: url('Nilland.eot'); 
src: url('Nilland.eot?#iefix') format('embedded-opentype'),
     url('Nilland.woff') format('woff'),
     url('Nilland.ttf')  format('truetype'),
     url('Nilland.svg#Nilland') format('svg');
}

Answer 3

Try specifying the complete path

Answer 4

@Felix is right although; try separate block for normal and bold font. Use svg and other formats for multiple browser compatibility and path may be issue not to work.

@font-face {
    font-family: 'Nilland';
    src: url('../fonts/Nilland.ttf') format('truetype'), url('fonts/Nilland.svg') format('svg');
    src: url('../fonts/Nilland.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Nilland";
    src: url("../fonts/Nilland.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}