CODEWITHSUNDEEP
htmlcssfont-family
user2623706
user2623706

Reputation: 527

trying to use @font-family

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?

Upvotes: 0

Views: 150

Answers (4)

Kunj
Kunj

Reputation: 2018

@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;
}

Upvotes: 0

Vidhi
Vidhi

Reputation: 89

Try specifying the complete path

Upvotes: 0

Felix
Felix

Reputation: 38102

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');
}

Upvotes: 2

Neutrosider
Neutrosider

Reputation: 572

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

Upvotes: 0

Related Questions