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    lt link rel  stylesheet  href     css main css  type  text css  media  screen  projection    gt    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

User · Answer

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

User · Answer

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

User · Answer

In my case  I sloved problem with inserting font-face style code   lt style type  text css  gt   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       lt  style gt    direclty in header on your index html or php page  in style tag  Works for me

User · Answer

May be its not because of your code  Its because of your Firefox configuration    Try this from Tool bar Western to Unicode         View  gt  Text Encoding  gt  Unicode

User · Answer

Try this      http   geoff evason name 2010 05 03 cross-domain-workaround-for-font-face-and-firefox

User · Answer

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

User · Answer

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

User · Answer

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    lt  xml version  1 0  encoding  utf-8   gt   lt configuration gt       lt system webServer gt           lt httpProtocol gt               lt customHeaders gt                   lt add name  Access-Control-Allow-Origin  value       gt               lt  customHeaders gt           lt  httpProtocol gt       lt  system webServer gt   lt  configuration gt    This worked like a charm for me  If you need to restrict access to particular domain  replace the   with the domain

User · Answer

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   lt FilesMatch     ttf otf eot    gt       lt IfModule mod headers c gt      Header set Access-Control-Allow-Origin          lt  IfModule gt   lt  FilesMatch gt    found via

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

In addition to adding the following to your  htaccess   thanks  Manuel    lt FilesMatch     ttf otf eot    gt     lt IfModule mod headers c gt      Header set Access-Control-Allow-Origin        lt  IfModule gt   lt  FilesMatch gt    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   lt FilesMatch     ttf otf eot woff    gt       lt IfModule mod headers c gt          Header set Access-Control-Allow-Origin          lt  IfModule gt   lt  FilesMatch gt     END REQUIRED FOR WEBFONTS

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt FilesMatch     ttf otf eot    gt       lt IfModule mod headers c gt          Header set Access-Control-Allow-Origin          lt  IfModule gt   lt  FilesMatch gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I had the same problem and solved it by adding meta for content    lt meta content  text html charset utf-8  http-equiv  Content-Type  gt   lt meta content  utf-8  http-equiv  encoding  gt    This happens in Firefox and Edge if you have Unicode texts in your html

User · Answer

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

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

Examples related to css

Examples related to firefox

Examples related to font-face

Examples related to file-uri