CODEWITHSUNDEEP
cssfont-face
Space
Space

Reputation: 33

font-face not showing up on Firefox

My @font-face works in every other browser I've tried, but on Firefox on Windows, it loads the font resources, but displays the fallback. Here is the code in question:

@font-face {
    font-family: 'VanillaRegular';
    src: url('http://dl.dropbox.com/u/19510731/ttfonts/Vanilla-webfont.eot');
    src: url('http://dl.dropbox.com/u/19510731/ttfonts/Vanilla-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://dl.dropbox.com/u/19510731/ttfonts/Vanilla-webfont.woff'),
         url('http://dl.dropbox.com/u/19510731/ttfonts/Vanilla-webfont.ttf'),
         url('http://dl.dropbox.com/u/19510731/ttfonts/Vanilla-webfont.svg#VanillaRegular');
    font-weight: normal;
    font-style: normal;
}

Then I've embedded it like this:

.post h3 {
border-bottom:1px solid #c7e7fa;
color:#51514E;
font-size:22px;
font-weight:bold;
line-height:1.4em;
margin:0.25em 0 8px;
padding:0 0 4px;
font-family: "VanillaRegular", Arial, sans-serif;
}

Is there something that I specifically need to do for Firefox, or is just my code?

EDIT: Should add, using Firefox 8, and the final product is on Blogger.

Upvotes: 3

Views: 2628

Answers (2)

henryaaron
henryaaron

Reputation: 6202

Put those fonts on your own server and they will work. Firefox cannot outsource fonts.

Upvotes: 3

James Khoury
James Khoury

Reputation: 22339

I beleive it is because you have

@font-face {

... Snip

font-weight: normal;
font-style: normal;
}

and your css you have

.post h3 {
... snip

font-weight:bold;

... snip
}

Unless you have more code there you need another declaration for your bold font.

Check out css3.info's article.

Upvotes: 0

Related Questions