Search code examples
htmlcss.htaccessfontsfont-face

Despite IE, @font-face not working in Chrome and FireFox

Sorry, this question might be duplicated, but I couldn't find any answer to my problem. implimenting @font-face in css works properly in IE but in FireFox and Chrome has no effect. I want to add a non-standard font to my web site, so I put the files Snazanin.ttf and Snaznnbd.ttf to the same directory as css file and added the following code to css:

@font-face{
        font-family: MyFont;
        src:url('Snazanin.ttf')format('truetype')   ;
    }
    @font-face{
        font-family: MyFont;
        src:url('Snaznnbd.ttf')format('truetype');
        font-weight: bold;  
    }

and in another css file I have:

#mainframe{
    width:666px;
    margin:0px auto 0px auto;
    font-family:MyFont;
}

also in the same directory, I have the file .htaccess which contains:

AddType font/ttf .ttf

as I mentioned earlier, there is no problem with IE but chrome and FireFox fail to show MyFont thanks for answering

Solution

  • I assume it has to do with the browser's support of the filetype. Here's a few quick references:

    http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

    http://caniuse.com/ttf

    http://caniuse.com/woff

    http://caniuse.com/eot

    http://caniuse.com/svg-fonts

    You may want to supply multiple font files. As per the w3schools link, a ttf/eot mix should have you covered.