@font-face not working in Firefox, but works in Chrome

Question

The fonts used to work, today they stopped working w/o any CSS changes. I can see from firebug net panel that the .woff gets downloaded (oddly twice, first DL is just a circle rolling forever and doesn't complete). Tested on FF9/10. Here's my CSS:

@font-face { font-family: 'BebasNeueRegular'; src: url('../fonts/BebasNeue-webfont.eot'); src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/BebasNeue-webfont.woff') format('woff'), url('../fonts/BebasNeue-webfont.ttf') format('truetype'), url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; } a.css3button, button, input[type="submit"], input[type="reset"], input[type="button"] { .. font-family: "bebasNeueRegular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; .. }

I got it from: http://dev.florianweber.me/bf3buttons/# -- where it does work in my Firefox. What could be causing conflicts?

Please trim your code to only include what is absolutely essential to reproduce your problem. — kba
– kba, Commented Jan 20, 2012 at 11:54
I showed it all, due if I knew what the cause is, I could have probably fixed it myself already. — red
– red, Commented Jan 20, 2012 at 11:59
Try generating on Font Squirrel - fontsquirrel.com/fontface/generator. — Dan Blows
– Dan Blows, Commented Jan 20, 2012 at 12:27

pdu · Accepted Answer · 2012-01-20 11:53:04Z

2

@font-face { font-family: 'BebasNeueRegular';

and

font-family: "bebasNeueRegular"

is not the same. Watch out for typos, font-family can be case sensitive.

answered Jan 20, 2012 at 11:53

pdu

10.5k4 gold badges61 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

red Over a year ago

Good catch, unfortunately this was not the issue, fixed typos still :)

red · Accepted Answer · 2012-05-02 21:26:14Z

We had our CDN domain serving the .css file -- which I guess Firefox disliked. I set the hard path to the font files in to the .css and it seems to be working now. :)

font-family: 'BebasNeueRegular'; src: url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.eot'); src: url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.woff') format('woff'), url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.ttf') format('truetype'), url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal;

Another way:

<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>

MBouwman · Accepted Answer · 2014-02-19 13:18:03Z

I figured out that Firefox loads the font names diffrent.

This did the trick for me, give it a try, don't know wich one is the good one, but it works. Try without brackets etc.

 font-family: 'bebas_neueregular', Bebas Neue, 'Bebas Neue', bebas_neueregular;

Well, it's another way to solve this problem if the above answers ain't working.

Collectives™ on Stack Overflow

@font-face not working in Firefox, but works in Chrome

3 Answers 3

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Related