CSS @font-face not working with Firefox, but working with Chrome and IE

Question

The following code works in Google Chrome beta as well as IE 7. However, Firefox seems to have a problem with this. I'm suspecting it to be a problem of how my CSS files are included, cause I know Firefox is not too friendly about cross-domain imports.

But this is all just static HTML and there's no question of cross-domain.

On my landing-page.html I do a CSS import like so:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

Within the main.css I have another imports like so:

@import url("reset.css"); @import url("style.css"); @import url("type.css");

and within the type.css I have the following declarations:

@font-face { font-family: "DroidSerif Regular"; src: url("font/droidserif-regular-webfont.eot"); src: local("DroidSerif Regular"), url("font/droidserif-regular-webfont.woff") format("woff"), url("font/droidserif-regular-webfont.ttf") format("truetype"), url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "DroidSerif Bold"; src: url("font/droidserif-bold-webfont.eot"); src: local("DroidSerif Bold"), url("font/droidserif-bold-webfont.woff") format("woff"), url("font/droidserif-bold-webfont.ttf") format("truetype"), url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg"); font-weight: normal; font-style: normal; } body { font-family: "DroidSerif Regular", serif; } h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

I have a directory called "font" in the same location as type.css. This font directory contains all the woff/ttf/svg files etc.

I'm stumped on this one. It works in Chrome and IE but not on Firefox. How is this possible? What am I missing?

I'm running into this exact problem with FontSquirrel generated directives and fonts at this moment. — jason
– jason, Commented Sep 12, 2010 at 22:37
for testing purposes can you try adding the @font-face declarations to your html between <style> tags and see if you have the same problem? — Chris_O
– Chris_O, Commented Sep 19, 2010 at 2:00
adding a single comma may solve this issue too, like: url('Sans-serif') format('woff') — Farzan Balkani
– Farzan Balkani, Commented Oct 13, 2013 at 7:33

Starx · Accepted Answer · 2013-10-11 15:47:30Z

LOCALLY RUNNING THE SITE (`file:///`)

Firefox comes with a very strict "file uri origin" (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference:

security.fileuri.strict_origin_policy

Set it to false and you should be able to load local font resources across different path levels.

PUBLISHED SITE

As per my comment below, and you are experiencing this problem after deploying your site, you could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn't, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:

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

Frankly, I wouldn't expect it to make any difference, but it's so simple it's worth trying: else try to use base64 encoding for your font typeface, ugly but it may works too.

A nice recap is available here

If you are not working locally, then this will probably not solve that, but you may want to use root-based paths on a live site anyway, that is, "/resources/font" instead of relative ones such as "../font", but i don't know about thumblr: if you can give out the url for the site i can give it a look.
The font declaration works fine in Chrome, Safari, even all they way back to IE6... but not firefox.
Ah you are speaking about the infamous cross-domain problem: you can either use your font in a base64 encoding, or ask thumblr to add an additional "Access-Control-Allow-Origin" header when serving fonts.
Then how ridiculously strict is Firefox's cross domain policy? Like, the CDN and the site share the same domain, just different subdomains.
@jason, the messy 64 bit encoding doesn't work either? It worked for me.

alademann · Accepted Answer · 2012-03-05 17:02:39Z

In addition to adding the following to your .htaccess: (thanks @Manuel)

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

You may want to try explicitly adding the webfont mime types to the .htaccess file... like this:

AddType font/ttf .ttf AddType font/eot .eot AddType font/otf .otf AddType font/woff .woff

In the end, my .htaccess file looks like this (for the section that enables webfonts to work in all browsers)

# BEGIN REQUIRED FOR WEBFONTS AddType font/ttf .ttf AddType font/eot .eot AddType font/otf .otf AddType font/woff .woff <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> # END REQUIRED FOR WEBFONTS

Did the trick for me as well. I had to add woff2 as well: AddType font/woff2 .woff2

A5C1D2H2I1M1N2O1R2T1 · Accepted Answer · 2012-07-18 18:00:47Z

16

I've had this problem too. I found the answer here: http://www.dynamicdrive.com/forums/showthread.php?t=63628

This is an example of the solution that works on firefox, you need to add this line to your font face css:

src: local(font name), url("font_name.ttf");

edited Jul 18, 2012 at 18:00

A5C1D2H2I1M1N2O1R2T1

194k31 gold badges417 silver badges497 bronze badges

answered Jul 18, 2012 at 17:37

israeli

1931 silver badge2 bronze badges

2 Comments

henry Over a year ago

Putting a local('name') in the font-face declaration just means "try to load font 'name' on the user's computer. if it isn't found, load the webfont." (see the MDN docs). Still, glad it worked for you! :)

Hugo Delsing Over a year ago

It worked "For you" because you had the font installed on your computer. Other users wont see it. You fixed it just for you.

ruyadorno · Accepted Answer · 2012-02-27 18:27:13Z

I'll just leave this here because my co-worker found a solution for a related "font-face not working on firefox but everywhere else" problem.

The problem was just Firefox messing up with the font-family declaration, this ended up fixing it:

body{ font-family:"MyFont" !important; }

PS: I was also using html5boilerplate.

KatieK · Accepted Answer · 2012-11-06 19:04:48Z

I was having the same problem. Double check your code for H1, H2 or whatever style you are targeting with the @font-face rule. I found I was missing a coma after font-family: 'custom-font-family' Arial, Helvetica etc It was showing up fine in every browser apart from Firefox. I added the coma and it worked.

Octavian Vladu · Accepted Answer · 2013-03-05 11:22:40Z

I had exactly the same problem. I had to create a new folder called "fonts" and put it in wp_content. I can access it from my browser like this http://www.example.com/wp-content/fonts/CANDY.otf

Previously, the fonts folder was in the same directory as my CSS file, and the @font-face looked like this:

@font-face { font-family: CANDY; src: url("fonts/CANDY.otf"); }

As i mentioned above, this was not working in Firefox but only with Chrome. Now it is working because I used an absolute path:

@font-face { font-family: CANDY; src: url("http://www.example.com/wp-content/fonts/CANDY.otf"); }

davus · Accepted Answer · 2011-05-23 19:39:47Z

I had exactly this problem running ff4 on a mac. I had a local development server running and my @font-face declaration worked fine. I migrated to live and FF would 'flash' the correct type on first page load, but when navigating deeper the typeface defaulted to the browser stylesheet.

I found the solution lay in adding the following declaration to .htaccess

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

found via

Pierre · Accepted Answer · 2011-07-26 13:22:48Z

One easy solution that no one's mentioned yet is embedding the font directly into the css file using base64 encoding.

If you're using fontsquirrel.com, in the font-face Kit Generator choose expert mode, scroll down and select Base64 Encode under CSS Options - the downloaded Font-Kit will be ready to plug and play.

This also has the fringe benefit of reducing page load time because it requires one less http request.

the comments on the picked solution do mention the base64 encode solution.
@KaushikGopal I think the answer must have been edited after I posted this.

niall.campbell · Accepted Answer · 2012-07-17 23:02:43Z

I'd mention that some fonts have issues in firefox if their filename contains specific characters. I've recently run into an issue with the font 'Modulus' which had a filename '237D7B_0_0'. Removing the underscores in the filename and updating the css to match the new filename solved this problem. Other fonts with similar characters don't have this issue which is very curious...probably a bug in firefox. I'd recommend keeping filenames just to alphanumeric characters.

THIS. MyFonts.com spits out their font files named this way and it results in Firefox 35 rendering in all sorts of bizarre ways. Renaming the font solved the problem.

Casey · Accepted Answer · 2010-09-15 07:58:24Z

For this font in particular you should be using the Google Font API:

http://code.google.com/webfonts/family?family=Droid+Sans

If you still want to use FontSquirrel's kit generator, use the Smiley hack option to eliminate local font problems. After you've generated a kit, check that the generated demo.html works in FireFox. I bet it does. Now upload it to your server -- I bet it works there too since FontSquirrel is awesome.

However, if you broke the generated kit code while integrating it into your project, use the standard methods of debugging -- check for 404's and go line by line until you find the problem. WOFF should definitely work in FF, so thats a good place to start.

Finally, if none of this works, update FireFox. I wrote all this assuming that you are using the latest; but you didn't specify what version you are checking in, so that could be your problem too.

Actually you shouldn't use the Google Font API for this. There's a problem with Firefox which prevents the font variants (italic, bold, etc) to be used if you have the font installed locally. Only way around this I've found is to nerf the local src declaration with the smiley (of course, any weird character(s) would do, it's just so... happy).
Here's a link to the bug report: code.google.com/p/googlefontdirectory/issues/detail?id=13

jason · Accepted Answer · 2010-09-18 22:58:58Z

Try nerfing the local source declaration in your @font-face directives.

There's a known bug in either Firefox or the Google Font API that prevents the variants of fonts to be used if the font is installed locally, and matches the defined local name:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

To effectively nerf the local declaration, just make your local source string some nonsense. The generally accepted convention for this is to use a the smiley unicode character ("☺"). Why? Paul Irish has a great explanation up on his blog:

http://paulirish.com/2010/font-face-gotchas/#smiley

Didn't know PaulI came up with a new bullet method, will have to try this one and see if it solves my FF font-face issues.
[Update: While helpful, it doesn't solve the issue].I did get pointed though to the right solution.

David Baron · Accepted Answer · 2010-05-18 15:14:46Z

1

Are you testing this in local files or off a Web server? Files in different directories are considered different domains for cross-domain rules, so if you're testing locally you could be hitting cross-domain restrictions.

Otherwise, it would probably help to be pointed to a URL where the problem occurs.

Also, I'd suggest looking at the Firefox error console to see if any CSS syntax errors or other errors are reported.

Also, I'd note you probably want font-weight:bold in the second @font-face rule.

answered May 18, 2010 at 15:14

David Baron

9154 silver badges5 bronze badges

4 Comments

KG - Over a year ago

Hmm.. yes David, i do seem to be running it locally, but i previously had it has a subdirectory withing the same directory. So my type.css lies in the root folder and within the same place lies the font folder. so type.css and the font folder are in the same directory. To be on the safe side, i also tried removing it from the directory and directly placing the fonts. It still doesn't work on firefox.

KG - Over a year ago

I'm now beginning to feel it's one of the two: 1) something wrong in my coding, if anyone spots anything from above code, please be so kind as to point it out. 2) FF doesn't treat @font-face and multiple file imports nicely? I use main.css which inturn imports @import type.css which in turn has the folder link to the fonts? Any light folks? Btw thanks for the font-weight catch @David!

Casey Over a year ago

Firefox handles multiple imports just fine. What version are you using? Debug the code using FireBug; use process of elimination. Working locally introduces problems that might be eliminated remotely. This is how you debug!

Mike Chamberlain Over a year ago

"Files in different directories are considered different domains for cross-domain rules" - no, they're not.

rossisdead · Accepted Answer · 2010-09-13 22:00:25Z

This is a problem with how you setup your font-face's paths. Since you didn't start the path with a "/", Firefox will attempt to find the font's based on the path the stylesheet's in. So basically, Firefox is looking for your font in the "root/css/font" directory instead of the "root/font" directory. You can easily fix this by either moving the font folder to the css folder, or adding a / to the beginning of your font paths.

Try this out:

@font-face { font-family: "DroidSerif Regular"; src: url("/font/droidserif-regular-webfont.eot"); src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "DroidSerif Bold"; src: url("/font/droidserif-bold-webfont.eot"); src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg"); font-weight: normal; font-style: normal; } body { font-family: "DroidSerif Regular" , serif; } h1 { font-weight: bold; font-family: "DroidSerif Bold"; }

GDP · Accepted Answer · 2012-07-31 21:13:59Z

Using an .htaccess Access Control Allow Origin rule didn't work for me when I was confronted with this issue.

Instead, in IIS in the web.config insert the system.webServer block shown below.

<?xml version="1.0" encoding="utf-8"?> <configuration> <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol> </system.webServer> </configuration>

This worked like a charm for me. If you need to restrict access to particular domain, replace the * with the domain.

WebFixItMan · Accepted Answer · 2014-04-05 20:49:13Z

I was having the same problem getting a font to display properly in Firefox. Here is what I found to work for me. Add a slash before the directory holding the font in the url attribute. Here is my before and after versions:

B E F O R E: @font-face { font-family: "GrilledCheese BTN"; src: url(fonts/grilcb__.ttf); } A F T E R: @font-face { font-family: "GrilledCheese BTN"; src: url(/fonts/grilcb__.ttf); }

notice the leading slash before 'fonts' in the url? This tells the browser to start at the root directory and then access the resource. At least for me - Problem Solved.

Ganesh Garad · Accepted Answer · 2018-01-11 04:45:01Z

If you are trying to import external fonts you face one of the most common problem with your Firefox and other browser. Some time your font working well in google Chrome or one of the other browser but not in every browser.

There have lots of reason for this type of error one of the biggest reason behind this problem is previous per-defined font. You need to add !important keyword after end of your each line of CSS code as below:

Example:

@font-face { font-family:"Hacen Saudi Arabia" !important; src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important; src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important; src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important; src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important; } .sample { font-family:"Hacen Saudi Arabia" !important; }

Description: Enter above code in your CSS file or code here. In above example replace "Hacen Saudi Arabia" with your font-family and replace url as per your font directory.

If you enter !important in your css code browser automatically focus on this section and override previously used property. For More details visit: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Kal · Accepted Answer · 2022-01-07 06:38:50Z

Here's one more to add to the list. I discovered that if you specify a local src with a name that matches a generic font name, it breaks the entire rule in Firefox (and only Firefox). Example:

@font-face { font-family: code; src: local(Monaco), url(monaco.woff2) format("woff2"), local(monospace); }

This will fail in Firefox (as of version 95.0.2) and display the text in the unstyled default (Times) because the last src value matches the name of a generic font (monospace) that's supported by Firefox. The following values all fail in the same way:

cursive
fantasy
monospace
sans-serif
serif
system-ui

It's an edge case for sure (and probably a bug), but it may help someone. You can't fall back to generic fonts this way, and if, for some reason, you really need to reference a local font of the same name, you should put it between quotation marks.

ipalaus · Accepted Answer · 2010-09-12 22:54:59Z

0

Can you check with firebug if do you get some 404? I had problems in the pass and I found that the extension was the same but linux file.ttf is different from file.TTF... and it worked with all browsers except firefox.

Wish it helps!

answered Sep 12, 2010 at 22:54

ipalaus

2,2834 gold badges28 silver badges43 bronze badges

3 Comments

jason Over a year ago

I strongly doubt it would be 404'ing in only one browser and not others.

ipalaus Over a year ago

@jason One browser can use a filetype different from another. :)

jason Over a year ago

Well, in the cases that I've ran into this issue, I can 100% say that Firebug's net panel shows it loading the font successfully.

mgauthier · Accepted Answer · 2011-09-13 01:45:02Z

Try this....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

SKWebDev · Accepted Answer · 2012-03-08 17:16:10Z

I had a similar problem. The fontsquirel demo page was working in FF but not my own page even though all files were coming from the same domain!

It turned out that I was linking my stylesheet with an absolute URL (http://example.com/style.css) so FF thought it was coming from a different domain. Changing my stylesheet link href to /style.css instead fixed things for me.

arri · Accepted Answer · 2012-11-24 15:47:53Z

Perhaps your problem is a naming-issue, specifically with regard the use (or not) of spaces and hyphens.

I was having similair issue, which i thought i had fixed by placing the optional quotes (') around font-/family-names, but that actually implicitly fixed a naming issue.

I'm not completely up-to-date on the CSS-specification, and there is (at leat to me) some ambiguity in how different clients interpret the specs. Additionally, it also seems related to PostScript naming conventions, but please correct me if i'm wrong!

Anyway as i understand it now, your declaration is using a mixture of two possible distinct flavors.

@font-face { font-family: "DroidSerif Regular";

If you'd consider Droid the actual family-name, of which Sans and Serif are members, just like for instance their children Sans Regular or Serif Bold, then you either use spaces everyhere to concatinate identifiers, OR you remove spaces and use CamelCasing for the familyName, and hyphens for sub-identifiers.

Applied to your declaration, it would look something like this:

@font-face { font-family: "Droid Serif Regular";

OR

@font-face { font-family: DroidSerif-Regular;

I think both should be perfectly legal, either with or without the quotes, but i've had mixed success with that between various clients. Maybe, one day, i have some time to figure-out the details on this/these isseu/s.

I found this article helpful in understanding some of the aspects involved: http://mathiasbynens.be/notes/unquoted-font-family

This article has some more details on PostScript specifically, and some links to an Adobe specification PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

CR41G14 · Accepted Answer · 2012-12-08 08:50:36Z

No need to mess around with settings just remove the quotes and spaces from the font-family:

this

body {font-family: "DroidSerif Regular", serif; }

becomes this

body {font-family: DroidSerifRegular, serif; }

Aleksandar · Accepted Answer · 2013-11-01 16:33:32Z

In my case, I sloved problem with inserting font-face style code

<style type="text/css"> @font-face { font-family: 'Amazone';font-style: normal; /*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ src: local('Amazone'), url(font/Amazone.woff) format('woff');} </style>

direclty in header on your index.html or php page, in style tag. Works for me!

rablentain · Accepted Answer · 2016-01-04 09:35:59Z

Because of that this is one of the top Google results for this problem I would like to add what solved this problem for me:

I had to remove the format(opentype) from the src of the font-face, then it worked in Firefox as well. It worked fine in Chrome and Safari before that.

Arun V Jose · Accepted Answer · 2017-05-27 07:27:35Z

May be its not because of your code, Its because of your Firefox configuration.

Try this from Tool bar Western to Unicode

View > Text Encoding > Unicode

amir mola · Accepted Answer · 2018-01-11 10:12:51Z

I had the same problem and solved it by adding meta for content:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding">

This happens in Firefox and Edge if you have Unicode texts in your html.

die Tante Jensen · Accepted Answer · 2021-09-30 08:52:33Z

Firefox lets you switch off web fonts entirely. This was the case or me.

To turn it on, go to Preferences>Content>Advanced and check the box.

related artice at fontspring

rnaud · Accepted Answer · 2010-05-18 11:34:55Z

-2

I don't know how you created the syntax as I neved used svg in font declaration, but Font Squirel has a really good tool to create a bullet proof syntax font-face from just one font.

http://www.fontsquirrel.com/fontface/generator

answered May 18, 2010 at 11:34

rnaud

2,61232 silver badges38 bronze badges

3 Comments

KG - Over a year ago

Thanks rnaud, I infact used fontsquirrel for the above :) . Just reformatted with tabs and spaces to a readable form.

jason Over a year ago

You've never used SVG in font declaration but you use Font Squirrel? Then you have used SVG in font declaration.

rossisdead Over a year ago

@jason: You can opt out of using SVG with Font Squirrel.

Nehbur · Accepted Answer · 2011-11-01 14:05:08Z

Could also be the use of the URL in the path of the font-face tag. If you use "http://domain.com" it doesn't work in Firefox, for me changing it to "http://www.domain.com" worked.

mikołaj · Accepted Answer · 2013-05-11 17:47:20Z

My problem was that Windows named the font 'font.TTF' and firefox expected 'font.ttf' i saw that after opening my project in linux, renamed the font to propper name and everything works

Collectives™ on Stack Overflow

CSS @font-face not working with Firefox, but working with Chrome and IE

30 Answers 30

LOCALLY RUNNING THE SITE (`file:///`)

PUBLISHED SITE

11 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

2 Comments

1 Comment

2 Comments

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

30 Answers 30

LOCALLY RUNNING THE SITE (file:///)

PUBLISHED SITE

11 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

2 Comments

1 Comment

2 Comments

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Linked

Related

LOCALLY RUNNING THE SITE (`file:///`)