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

    |
  • Added:
  • |
  • In: Wordpress

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?

This Question Has 26 Answeres | Orginal Question | Kaushik Gopal

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!

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.

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

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.

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 

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"; } 

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

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

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 

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.

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.

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.

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.

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!

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

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.

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"); 

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; } 

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.

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

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.

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"); } 

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/

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.

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.


Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

NEED HOSTING?
Are you searching for Good Quality hosting?
You can Try It!
Connect Social With PHPAns
Top