Search code examples
cssfont-face

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.

Solution

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