CODEWITHSUNDEEP
htmlcssfirefoxfontsfont-face
Earl Larson
Earl Larson

Reputation: 5299

@font-face not cooperating in Firefox

I have tried numerous things, including clicking on ALL of the questions related to my question (there were tons!) and tried all of their "solutions" but none worked for me. I tried wrapping the .eot file in a conditional IE statement but that didn't work either. Somebody said that @font-face won't work in Firefox if your not hosting the file on your own server... Or something like that. Anyway, go here to see the comparison between all other browsers vs Firefox. Please don't bash! I really did try every solution Google and stackoverflow had to offer. (Keep in mind that this is a Tumblr theme, and all files/images must be hosted via Tumblr's uploader .)

Thanks in advance!

Also, here is the code I have been using:

<!--[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 about:config in Firefox and toggling security.fileuri.strict_origin_policy to false but it didn't work. Plus I need a way so all users who view my theme or use it to be able to view the font as well, and that is set to true by default.

Upvotes: 3

Views: 3205

Answers (4)

Steffen Becker
Steffen Becker

Reputation: 1

I've had a similar problem, it worked everywhere, but not in Firefox4 on a Mac. I declared the @font-face-Stuff inside another @media block (only loading fonts for non-mobile devices) - and that's what caused the error.

This didn't work:

@media sth... {

  @font-face {
    ...
  }

}

This did work:

@font-face {
  ..
}

@media sth... {

}

Upvotes: 0

cdcdcd
cdcdcd

Reputation: 1722

Edit:

Here is the solution: Cross domain workaround

Firefox does not like cross domain embedding.

Upvotes: 3

hradac
hradac

Reputation: 2491

Earl, I hate to be one to tell you this but your problem isn't with your @font-face rule. At least it wasn't when I checked out your site. When you use CSS font-family you need to make sure there is a comma between each different font in your chosen stack. Your h6 selector was:

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

It should be:

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

Give this a try and I think it will work out for your. Just make sure all of your font-family stacks have commas in between multiple fonts. Firefox is a bit more strict with parsing technically incorrect CSS; Firefox just ignores it. That appears to be why you are having a problem, not your @font-face.

Upvotes: 1

Phil.Wheeler
Phil.Wheeler

Reputation: 16848

I'm not completely convinced by your @font-face rule. Can you copy the following and see what (if any) difference it makes? Just to clean things up.

@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');
}

That just cleans a couple of minor things up. I'd also suggest changing your font name to something other than "S"; "Zegoe Light", for example.

Ivo Wetzel is correct from your comments though, this may be an issue with the way Tumblr serves up media with unknown file extensions.

Upvotes: 0

Related Questions