CODEWITHSUNDEEP
firefoxembedfont-face
joey87
joey87

Reputation: 31

Firefox font-face embed does not work

I have a website where I have implemented a custom font. In google chrome and internet explorer the font shows up properly. When I check firefox, the new font family has not even been applied. This is what I have:

@font-face{
font-family: Bebas Neue;
src: url('fonts/BebasNeue.otf');
}

I tried adding the format after it but that did not fix it. Any suggestions why the .otf would not be showing and why the .ttf and .eot work in their respective browsers?

Upvotes: 2

Views: 1541

Answers (1)

Parker Young
Parker Young

Reputation: 1165

Have you tried using TTF format instead of OTF for Firefox? Sometimes, Firefox also requires WOFF font formats to display a font, depending on how you are serving them. I would assume you have Firefox 3.6 or above, but that could also be the problem. The snippet of code below is Font Squirrel's standard for @font-face and may be of use to you.

@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/BebasNeue.eot');
    src: url('fonts/BebasNeue.eot?#iefix') format('embedded-opentype'),
        url('fonts/BebasNeue.svg') format('svg'),
        url('fonts/BebasNeue.svg#Bebas Neue') format('svg'),
        url('fonts/BebasNeue.woff') format('woff'),
        url('fonts/BebasNeue.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

I hope this info helps you out. Good luck! If you nee more info, let me know or check out the Firefox heading on this article: http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems

Upvotes: 0

Related Questions