CSS font-face not working for ttf

Question

I am using @font-face like this:

@font-face {
    font-family: DINPro;
    font-weight: bold;
    src: url(../res/fonts/DINPro-Bold.otf) format("opentype");
}
@font-face {
    font-family: DINPro;
    src: url(../res/fonts/DINPro-Regular.otf) format("opentype");
}
@font-face {
    font-family: DFLiHei;
    src: url(../res/fonts/DFLiHei-Regular.ttf) format('truetype');
}
h1{
    font-family: DFLiHei !important;
}

But not working. My folder structure is likely:

/index.html
/css/style.css
/res/fonts/DINPro-Bold.otf
/res/fonts/DINPro-Regular.otf
/res/fonts/DFLiHei-Regular.ttf

Therefore, I think wrong directory is not my problem. Also, not only fail in special browser, but also in chrome and mobile. Any idea?

Try to remove the second font-family, or the two first. Just for test — SpaceDogCS, Apr 28 '17 at 03:12
Possible duplicate of [How to include a font .ttf using CSS?](http://stackoverflow.com/questions/24990554/how-to-include-a-font-ttf-using-css) — CodeMonkey, Apr 28 '17 at 03:32

score 0 · Accepted Answer · answered Apr 28 '17 at 03:29

0

Convert ttf to woff format

Try this

@font-face {
    font-family: DFLiHei;
    src: url(../res/fonts/DFLiHei-Regular.woff) format('woff');
}

It will work in all browsers

answered Apr 28 '17 at 03:29

Amal

3,340
1
10
19

CSS font-face not working for ttf

1 Answers1