X
Tap here to go to the mobile version of the site.

Support Forum

"@font-face" problem only with firefox. I have attached a style sheet while i was embedding my personal fonts into a website, but Firefox won't load them. Why?

Posted

I was hand coding my new website. This time i was trying to embed some personal fonts into my website, so i used a style sheet to embed which is coded like "@font-face { font-family:Sofia; src:url(../fonts/Sofia-Regular.otf); }

All the font work fine in the root folder of my site. But whenever i am creating dreamweaver templates and using them on pages which are in different folders but in the same root directory, the fonts are set back to default font. This problem is only with Firefox. Chrome, IE, Opera etc. works fine. Please Help!
I was hand coding my new website. This time i was trying to embed some personal fonts into my website, so i used a style sheet to embed which is coded like "@font-face { font-family:Sofia; src:url(../fonts/Sofia-Regular.otf); } All the font work fine in the root folder of my site. But whenever i am creating dreamweaver templates and using them on pages which are in different folders but in the same root directory, the fonts are set back to default font. This problem is only with Firefox. Chrome, IE, Opera etc. works fine. Please Help!

Additional System Details

Installed Plug-ins

  • Google Update
  • Shockwave Flash 11.6 r602
  • NVIDIA 3D Vision plugin for Mozilla browsers
  • NVIDIA 3D Vision Streaming plugin for Mozilla browsers
  • VLC media player Web Plugin 2.0.2
  • Adobe PDF Plug-In For Firefox and Netscape 11.0.0
  • The plug-in allows you to open and edit files using Microsoft Office applications
  • Office Authorization plug-in for NPAPI browsers

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; rv:20.0) Gecko/20100101 Firefox/20.0

More Information

cor-el
  • Top 10 Contributor
  • Moderator
17578 solutions 159013 answers

You can check the "Web Developer > Web Console" (Ctrl+Shift+K) or Error Console for errors.
You need to do a hard reload (Ctrl+F5) to see if there are security issues with downloading the font.

You can check the "Web Developer > Web Console" (Ctrl+Shift+K) or Error Console for errors.<br /> You need to do a hard reload (Ctrl+F5) to see if there are security issues with downloading the font. * https://developer.mozilla.org/en/CSS/@font-face * https://developer.mozilla.org/En/HTTP_Access_Control
freixas 0 solutions 1 answers

I think this is a security restriction in Firefox.

If you have a page at file:///<somewhere>/pages/mypage.html, then you can only load fonts located in file:///<somewhere>/pages or below. So, for example, if the fonts are in file:///<somewhere>/fonts, they won't load, but if they are in file:///<somewhere>pages/fonts, then they should work. At least, that's how it seems to work for me.

I think this is a security restriction in Firefox. If you have a page at file:///<somewhere>/pages/mypage.html, then you can only load fonts located in file:///<somewhere>/pages or below. So, for example, if the fonts are in file:///<somewhere>/fonts, they won't load, but if they are in file:///<somewhere>pages/fonts, then they should work. At least, that's how it seems to work for me.
AinStain 0 solutions 1 answers

i run into the same problem the last days. using bootstrap and the fontawesome iconfonts. everythings fine with chrome an ie, but no fonticons with firefox... found alot of solutions, but none of them worked. then, using the webdeveloper console (i used firebug all the time before) i see the error why the webfont was not loaded:

[14:18:36.161] GET http://www.example.com/font/fontawesome-webfont.ttf?v=3.2.0 [HTTP/1.1 401 Authorization Required 21ms]

yes, the site is behind a htaccess login. first load after login is => everything ok! after following an internal link => no webfonts!

after disabeling the htaccess login, everything works fine! but that can only be a workaround! why firefox didnt recognize the login/authorization like chrome does?!

what todo if you have your site behind htaccess and want to use webfonts?!

i run into the same problem the last days. using bootstrap and the fontawesome iconfonts. everythings fine with chrome an ie, but no fonticons with firefox... found alot of solutions, but none of them worked. then, using the webdeveloper console (i used firebug all the time before) i see the error why the webfont was not loaded: [14:18:36.161] GET http://www.example.com/font/fontawesome-webfont.ttf?v=3.2.0 [HTTP/1.1 401 Authorization Required 21ms] yes, the site is behind a '''htaccess''' login. first load after login is => everything ok! after following an internal link => no webfonts! after disabeling the htaccess login, everything works fine! but that can only be a workaround! why firefox didnt recognize the login/authorization like chrome does?! what todo if you have your site behind htaccess and want to use webfonts?!

Modified by AinStain