Chrome not reading all my @font-faces

问题:

I'm using different fonts for my page. Codes I've used in my CSS file are as followed:

@font-face{
font-family:dst;
src:url('fonts/dastnevis.ttf'),
    url('fonts/dastnevis.eot'),
    url('fonts/dastnevis.otf');
}

@font-face{
font-family:hayat;
src:url('fonts/hayat.ttf'),
    url('fonts/hayat.eot'),
    url('fonts/hayat.otf');
}

@font-face{
font-family:taha;
src:url('fonts/taha.ttf'),
    url('fonts/taha.eot'),
    url('fonts/taha.otf');
}

The problem is that Chrome (I'm using version 28) is reading only one of these 3 fonts, which is dst, not showing others. I'm using dst for a button, hayat for footer, and taha for body.

EDIT: Firefox is reading and showing all those with no problem. It's not that Chrome can't read any font at all, it's that it reads one font and ignores the others, though they all have the same syntax.

回答1:

The Chrome always use woff. As i see in your post, you didn't have the woff loaded.

Anyway, Chrome with woff get no rendering smoothness effect, than you need to force Chrome to use SVG.

To solve your problem, do it:

1) Go to this website, upload your TTF and get complete kit of your font. 2) When you download this kit, this will work on Chrome, but to get Fix for smoothness effects, you need to do some changes to force the Chrome to use SVG font. Then, go to this webiste to learn how to fix the effect. And that's all. You should get this working without any problems. If you have some doubt let me know and i'll help you!

When you go to the font face kit generator, you need to use expert options and select to SVG font be generated.

After download the package, to force chrome use the rendering effect, add this css after font-face css. Something like this:

@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}
}

Let me know if you get this working =)

回答2:

may this help u:

@font-face {
    font-family: 'dst';
    src: url('fonts/dastnevis.eot');/* IE9 Compat Modes */
    src: url('fonts/dastnevis.eot?#iefix'); /* IE6-IE8 */
    url('fonts/dastnevis.woff') format('woff'), /* Modern Browsers */
    src: local('☺'),  url('fonts/dastnevis.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/dastnevis.svg') format('svg');
    font-weight: normal !important;
    font-style: normal !important;
}