Question

I m having a problem with @font-face. It actually works flawlessly on Safari, internet explorer 7+ and Firefox for windows but not at all on firefox for mac.

I m using code from the bulletproof @font-face article

Here s my Code:

@font-face {
    font-family: "QlassikMediumRegular";
    src: url("../fonts/Qlassik_TB.eot");
    src: local("Qlassik Medium Regular"), local("QlassikMedium"), url("../fonts/Qlassik_TB.ttf") format("truetype")
}

@font-face {
    font-family: "QlassikBoldRegular";
    src: url("../fonts/QlassikBold_TB.eot");
    src: local("Qlassik Bold Regular"), local("QlassikBold"), url("../fonts/QlassikBold_TB.ttf") format("truetype")
}

Here is the link to my site in question: link text

Answer 1

I typically use a more extended @font-face declaration:

@font-face {
font-family:  TypewriterOldstyle ;
src: url( ../fonts/typeo-webfont.eot );
src: url( ../fonts/typeo-webfont.eot?#iefix ) format( eot ),
     url( ../fonts/typeo-webfont.woff ) format( woff ),
     url( ../fonts/typeo-webfont.ttf ) format( truetype ),
     url( ../fonts/typeo-webfont.svg#webfonty9r23iiq ) format( svg );
font-weight: normal;
font-style: normal;
}

You could try generating at http://www.fontsquirrel.com/fontface/generator

Answer 2

Had the same problem, font s gave 301 error saying i did not have access to the font file.

What works best for me is placing the font file s in the same directory as the .css file, no hassle with anny .htaccess or other server config file s.

So i have one external fonts.css file containing all the css font line s within the font directory. Then i can include this .css file on the page i would like to use this font. Make sure you don t make additional directory s so you can call the font without anny directory.

more info: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

友情链接