@font-face doesn't work

Question

I downloaded a font inlove-light-wf.ttf, in order to use the rule @font-face.

I have in my folder: home.html and inlove-light-wf.ttf.

In my CSS I have :

@font-face {
    font-family: 'Inlove';
    src: url('inlove-light-wf.ttf');
    font-weight: normal;
    font-style: normal;
}

#definicao{
    text-align:center;
    color:#0080C0;
    font-family:'Inlove';
    font-size:24px;
    margin-top:20px;
    border-top:solid #999 thin;
    padding: 20px 40px 3px 40px;
    height:290px;
    background-color:#EFEFEF;
}

#definicao{
    text-align:center;
    color:#0080C0;
    font-family:'Inlove';
    font-size:24px;
    margin-top:20px;
    border-top:solid #999 thin;
    padding: 20px 40px 3px 40px;
    height:290px;
    background-color:#EFEFEF;
}

But it doesn't work.

Answer 1

One source of the problem could be if your css is in a separate file that isn't in the root folder. For example, if you keep all of your css files in a 'css' folder, you'll need to modify the font url to be relative to that file, not to the root folder. In this example it would be src: url('../inlove-light-wf.ttf');

Furthermore, not all browsers can use .ttf font files. You have to declare alternative font formats in the @font-face css.

Here's a modified @font-face declaration to get you started. I would also recommend reading more here and here.

@font-face {
    font-family: 'Inlove';
    src: url('inlove-light-wf.eot'); /* IE9 Compat Modes */
    src: url('inlove-light-wf.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('inlove-light-wf.woff') format('woff'), /* Modern Browsers */
         url('inlove-light-wf.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('inlove-light-wf.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Answer 2

The @font-face rule usually doesn't support some old browsers. I usually use font-face generator which will generate css file from your font that you need to include, and all browsers will show it correctly.