@ font-face does not work in Firefox

Question

I tried a lot of things, including clicking on ALL questions related to my question (there were tons!) And tried all their “solutions”, but no one worked for me. I tried to wrap the .eot file in a conditional IE statement, but that didn't work either. Someone said that @ font-face will not work in Firefox unless you host the file on your own server ... Or something like that. In any case, go here to see a comparison between all other browsers against Firefox. Please do not bash! I really tried all the solutions offered by Google and stackoverflow. (Keep in mind that this is a Tumblr theme, and all files / images must be hosted via the Tumblr uploader .)

Thanks in advance!

Also, here is the code I used:

<!--[if IE]>
<style>
@font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
}
</style>
<![endif]-->

<style>
@font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
src: local('S'), 
     local('S'), 
     url('http://static.tumblr.com/ctwb3zj/n4Zlfluv6/zegoelight-u-webfont.ttf')      
format('truetype'),
     url('http://static.tumblr.com/ctwb3zj/ovQlfluz3/zegoelight-u-webfont.svg#font')    
format('svg'); 
     url('http://static.tumblr.com/ctwb3zj/1AJlfluwz/zegoelight-u-webfont.woff')
format('woff');
}
</style>

I tried going to: config in Firefox and switching security.fileuri.strict_origin_policy to false, but that didn't work. Also, I need a way so that all users who have viewed or used my theme can also view the font, and the default is true.

Answer 1

Edit:

Here is the solution: Cross-domain workaround

Firefox doesn't like cross-domain embedding.

Answer 2

, , , @font-face. , . CSS, , . h6 :

h6 {font-size:36px; font-family: 'S' sans-serif;}

:

h6 {font-size:36px; font-family: 'S', sans-serif;}

, , . , . Firefox CSS; Firefox . , , @font-face.

Answer 3

@font-face. , ( ) ? .

@font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
src: local('☺'),
     url('http://static.tumblr.com/ctwb3zj/n4Zlfluv6/zegoelight-u-webfont.ttf')      
format('truetype'),
     url('http://static.tumblr.com/ctwb3zj/ovQlfluz3/zegoelight-u-webfont.svg#font')    
format('svg'); 
     url('http://static.tumblr.com/ctwb3zj/1AJlfluwz/zegoelight-u-webfont.woff')
format('woff');
}

. , "S"; , "Zegoe Light".

Ivo Wetzel is the correct one from your comments, although this may be a problem with the way Tumblr serves media with unknown file extensions.

Answer 4

I had a similar problem, it worked everywhere, but not on Firefox4 on Mac. I declared @ font-face-Stuff inside another @media block (only for downloading fonts for non-mobile devices) - and this caused an error.

This did not work:

@media sth... {

  @font-face {
    ...
  }

}

This worked:

@font-face {
  ..
}

@media sth... {

}