@font-face bug in FireFox 5 on Windows XP

This is really a solution. So I have a website that I am working on and I am using the @font-face and FF5 would not load the font. Then all of a sudden it was loading one the homepage but not the subpages as I quickly went back and forth through the pages. The instaces were using the exact same CSS! How is this possible? IE, Safari, Opera, Chrome were all loading the font. So I banged my head against the wall and realized that I didn't have www. in front of my domain.
If you are using @font-face with FireFox 5 and it is not loading the font, try adding the www. if you are not using it. Which also means I have to create a redirect to all http://domain.com users to http://www.domain.com so they don't get this problem.
Check out this video for proof: http://www.screenr.com/NPSs

You can use HTTP access control to make that less strict.
* http://www.webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox
<blockquote>Same-origin rule: By default, Firefox will only accept relative links. If you want to use absolute links or include fonts from different domains, you need to send these fonts with Access Control Headers.
</blockquote>
* https://developer.mozilla.org/En/HTTP_Access_Control
* https://developer.mozilla.org/en/CSS/@font-face

Similar Messages

@font-face fine on Firefox 3.6, but messed up layout on Firefox 5

Hi all,
I've been testing a wordpress website that I design using Firefox 3.6. I used the @font-face code in my style.css file and it worked just fine. However, when I upgraded to Firefox 5 just now, the layout was all messed up, just because of that font-face code. It seems like it "disables" all the CSS and therefore the layout looks really bad (like it has no CSS defined at all).
Here is how it supposed to look like (WITHOUT the font face code):
http://i213.photobucket.com/albums/cc134/ifgfdallas/Web%20Stuffs/without_fontface.jpg
You can also view it live: http://www.ifgfdallas.org
Now, here is how it looks like, all messed-up, when I put the font-face code:
http://i213.photobucket.com/albums/cc134/ifgfdallas/Web%20Stuffs/with_fontface.jpg
Anyone has any clues?

Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox. <br />
http://forums.mozillazine.org/viewforum.php?f=25 <br />
You'll need to register and login to be able to post in that forum.

How do I get font tags showing the courier font to display on Firefox 4 for Windows 7, 64 bit?

On pages like the linked one ([http://puppetfetishist.livejournal.com/4071.html]), the courier font does not show, while on other pages like [http://www.mspaintadventures.com/], the courier font displays properly.
<i><fixed links - edited by moderator></i>

Clear the cache and the cookies from sites that cause problems.
* "Clear the Cache": Tools > Options > Advanced > Network > Offline Storage (Cache): "Clear Now"
* "Remove the Cookies" from sites causing problems: Tools > Options > Privacy > Cookies: "Show Cookies"
Start Firefox in <u>[[Safe Mode]]</u> to check if one of the extensions is causing the problem (switch to the DEFAULT theme: Tools > Add-ons > Appearance/Themes).
* Don't make any changes on the Safe mode start window.
* https://support.mozilla.com/kb/Safe+Mode
* [[Troubleshooting extensions and themes]]

@font-face not working in FF, but working elsewhere.

Hey, I've been trying to get @font-face working in Firefox, but it just won't work. I'm hosting the font externally and the way I'm doing it works on other browsers. This is my code:
<body bgcolor="CA2E28" style="margin-left: 0px; margin-right: 0px;">
<style type="text/css" media="screen, print">
@font-face {
font-family: "Blackout";
src: url(woff link is here, don't want to put it here though.);
body { font-family: "Blackout" }
</style>
<center>THIS SHOULD BE BLACKOUT.</center>
</body>

''jscher2000 [[#answer-709096|said]]''
<blockquote>
Can you check to see whether Firefox is downloading the file? To do that, first open the Web Console in the lower part of the tab below your page using either:
* Ctrl+Shift+k
* "3-bar" menu button > Developer > Web Console
* (menu bar) Tools > Web Developer > Web Console
Click the "Network" button/tab along the top of the console and reload the page. Here you can see whether Firefox is requesting the file and, if so, whether it is retrieved.
If that checks out, then click the Console tab and reload the page and watch for any error messages that might relate to the font. Anything strange?
If the font is downloading and there are no error messages, use the Inspector tab to look at the body element and see whether the style is there and is being given effect (i.e., no line-through).
If all that is good, you might double-check your personal settings to make sure you aren't overriding website fonts. Either:
* "3-bar" menu button (or Edit menu) > Preferences > Content
Click the Advanced button and make sure you have a checkmark for "Allow pages to choose their own fonts".
If all of that is good, then... it's a mystery. Have you checked Firefox on other machines or other operating systems?
''For reference:'' https://developer.mozilla.org/docs/Web/CSS/@font-face
</blockquote>
This message came upon refreshing:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <my font like here>. This can be fixed by moving the resource to the same domain or enabling CORS. Blackout_Midnight-webfont.woff
And this one soon after:
downloadable font: download failed (font-family: "Blackout" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed
source: <my font link here>

Firefox 3.6.9 / Windows 7 will not print using font specified with @font-face - any workarounds?

I've seen a few mentions of this problem around the interwebs, but can't find a resolution. I used [http://www.fontsquirrel.com/fontface/generator fontsquirrel's font-face generator] to prepare different versions of a font for cross-browser display. Screen presentation in almost all browsers is fine, and almost all browsers print the embedded font as well - except for Firefox/PC (3.6.9/Windows 7).
I have tried inline styles, styles inside of the head, and external stylesheets, all with and without media type print. What can I do?

Hi John,
Can u try the work around mentioned in the below link
http://notsomany.wordpress.com/2010/03/30/jinitiator-working-on-windows-7/
Also some times IE8 can block the webutil_file_transfer.
AS_to_Client if "protected mode" is ON for the security zone your forms url is in (look in the statusbar in IE ->
internet, trusted site, ... -> protected mode: On/Off)
Regards
Fabian

Firefox 14.0.1 @font-face displaying most web fonts in bold, even though it works fine on Windows FireFox, IE9, Chrome, and Safari

Have been working with a web site and half of the @font-face web fonts have turned to extreme bold only on Firefox 14.0.1 for Mac OS X, they work fine on windows versions of firefox and all of the other browsers.
My firefox updated a couple days ago, which is when I noticed the problem.

You can do a check for corrupted and duplicate fonts and other font issues:
*http://www.thexlab.com/faqs/multipleappsquit.html - Font Book 2.0 Help: Checking for damaged fonts
*http://www.creativetechs.com/iq/garbled_fonts_troubleshooting_guide.html
You can check the <b>gfx.downloadable_fonts.*</b> prefs on the <b>about:config</b> page.
*http://kb.mozillazine.org/about:config

Has Mozilla changed the way Firefox displays @font-face enbeded fonts? The site I'm codeing works in Safari, Chrome, and IE, but Firefox 8.0.1 doesn't display the embeded font.

Has Mozilla changed the way Firefox displays @font-face enbeded fonts? The site I'm codeing works in Safari, Chrome, and IE, but Firefox 8.0.1 doesn't display the embeded font.

No problems here with the H1 headers.
Reload web page(s) and bypass the cache.
* Press and hold Shift and left-click the Reload button.
* Press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
* Press "Cmd + Shift + R" (MAC)

Does Firefox support @font-face for print?

Other people seem to be experiencing the same problem:
https://bugs.launchpad.net/ubuntu/+source/firefox/+bug/618843
http://stackoverflow.com/questions/4409957/font-face-printing-issue-in-firefox
http://support.mozilla.com/sq/questions/761014
I first noticed it when working locally on a website. The fonts were hosted locally.
I have also tried printing several google fonts pop-up specimens to no avail, cf http://www.google.com/webfonts/specimen/Lekton

Firefox supports AES-256 (256 bit) encryption since 2002 on web sites that support it like this site.
See [[Site Identity Button]]

I'm using the @font face to embed fonts on my site. Everytime I use a heading tag Firefox adds extra emphasis (making a bold font even bolder). How can I resolve this? The heading tag renders fine in Chrome/Safari.

<pre><nowiki><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="index/fonts/fonts.css"/>
</head>
<body>
<h1>Heading2</h1>
<p> Testing </p>
</body>
</html>
*/CSS/*
*/Fontface rule/*
@font-face {font-family: 'Gibson-Bold';src: url('159693_2.eot');src: url('159693_2.eot?#iefix') format('embedded-opentype'),url('159693_2.woff') format('woff'),url('159693_2.ttf') format('truetype'),url('159693_2.svg#wf') format('svg');
*/Testing use of Fontface/*
h1, h2, h3, h4, h5, h6 {
font-family: Gibson-Bold;
font-style: normal;
font-size: 10pt;</nowiki></pre>

You're welcome.
It is always a good idea to reload and bypass the cache after you have made changes and uploaded new files.
Reload web page(s) and bypass the cache.
* Press and hold Shift and left-click the Reload button.
* Press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
* Press "Cmd + Shift + R" (MAC)

Font face="army" works in my editing program for IE but not firefox

font face="army" works fine in IE but not firefox when using my website editing program
== This happened ==
Every time Firefox opened
== everytime

If you check Firefox's Web Console (Ctrl+Shift+K) it'll tell you any errors it's finding and the line of code it's finding it on.
The problem it seems to be having up front is that IDs are case-sensitive - "layer02" is not the same as "Layer02", for example.
There may be further errors once it's past that, but all the current browsers come with the tools you need to weed out any further issues.
Further Javascript reference: https://developer.mozilla.org/en-US/docs/JavaScript

@font-face not working in firefox

My @font-face is not working in firefox why would that be?
@font-face {
    font-family:LondonMM;
    src: url('LondonMM-webfont.eot');
    src: url('LondonMM-webfont.eot?#iefix') format('embedded-opentype'),
         url('LondonMM-webfont.woff2') format('woff2'),
         url('LondonMM-webfont.woff') format('woff'),
         url('LondonMM-webfont.ttf') format('truetype'),
         url('LondonMM-webfont.svg#londonmmregular') format('svg');
    font-weight: normal;
    font-style: normal;
I have them all in a fonts folder inside my root folder

There might be a problem with one of the fonts FF recognizes and that problematic file is the one FF is attempting to use.
Try commenting out all of the fonts FF can use, so...
@font-face {
    font-family:LondonMM;
    src: url('LondonMM-webfont.eot');
    src: url('LondonMM-webfont.eot?#iefix') format('embedded-opentype'),
        /*url('LondonMM-webfont.woff2') format('woff2'),*/
        /*url('LondonMM-webfont.woff') format('woff'),*/
        /*url('LondonMM-webfont.ttf') format('truetype'),*/
         url('LondonMM-webfont.svg#londonmmregular') format('svg');
    font-weight: normal;
    font-style: normal;
Then restore one at a time, individually, and see if FF comes back on line.

"@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?

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 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?!

Why does the @font-face work in a Private Tab, but not in a normal Tab?

I consistently find that the @font-face does not work in Firefox unless I use a Private Tab, but I prefer to use a regular Tab so that I can keep track of what pages I have visited. In a Private Tab the Android app displays Hebrew with cantillation marks as nicely as Windows does using the very same font. This is probably an unintended bug, as I cannot imagine why you would want Private Tabs to work better than the regular ones. The css function in question is:
@font-face {
font-family: 'Shlomo LB';
src: url('../ShlomoLightBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Hello,
Thank you for bringing this up. There is an open issue in Bugzilla - [https://bugzilla.mozilla.org/show_bug.cgi?id=769194 src:local() @font-face rules doesn't work on Android]. But in this case you are mentioning a src:url, so I don't know if they are related.
Also, can you please confirm if you are using NoScript or any other plugin on your browser and if there are settings that differ for the normal tabs vs. private tabs (noscript has an option to block @font-face).
Would it be possible for you to create a sample for testing this?
Thank you

FF 25 has issues on OS-X 10.8.5. It hangs sites with heavy dom manipulation + web font faces The same page is fine on FF25/Win. Is this being looked at?

I've been having a lot of issues with Firefox 25 hard-hanging on OS-X 10.8.5. Firefox 24 worked perfectly with various sites I've had problems with recently. Firefox 25 on Windows works fine with the same sites, so does Google Chrome 30, IE9, IE10, and IE11. The hang is very specific to FF25/OSX. Is this being looked at or reported by anyone else? My co-workers are also hitting this. It seems like FF25/OSX has some sort of deadlock condition when there is heavy dom maniplation occurring via JavaScript along with the usage of Web Fonts (font-face/font family). I have to force-quit it and restart. Safe mode makes no difference. Nor does clearing site information.
If there is any debug I can capture (such as triggering a stack dump) I am more than willing to generate it.

Followup. Any further updates from Firefox support? This is a blocking issue at my company. We are strong Firefox advocates, but this is starting to damage Firefox's reputation here.

FF5 error parsing CSS font-face with url inline base64 data

Firefox 5 refuses to parse CSS @font-face with url inline base64 data.
I use the declaration:
<style type="text/css">
@font-face {
font-family: 'MyFont';
src: url(data:font/truetype;charset=utf-8;base64,[base64data]);
</style>
then used this way:
<div style="font-family:'MyFont'; font-size:12.0pt">Test text</div>
But Firefox is not using the font and in the error console, there is always the message:
''Error parsing the "src" value. Skipped to next declaration.''
(more or less, I actually have this message in Czech)
Tried with different mime types (font/ttf,font/otf,font/opentype,application/x-font-ttf etc.), with or without charset specification, with or without quoting the font family name, with different specifications:
<style type="text/css">
@font-face {
font-family: 'MyFont';
src: url(data:font/truetype;charset=utf-8;base64,[base64data]) format(truetype);
</style>
(tried also with opentype format, etc.)
<style type="text/css">
@font-face {
font-family: 'MyFont';
src: url('myfont-webfont.eot?');
src: local('☺'), url(data:font/truetype;charset=utf-8;base64,[base64data]);
</style>
If I provide the font path:
<style type="text/css">
@font-face {
font-family: 'MyFont';
src: url('Arial.ttf');
</style>
(the font actually is Arial, for testing), it works (but I need to embed the font in the HTML for specific reason, so having the font externally is not the option).

Finally I got it work! Thanks, cor-el, you pointed me the right way to solve this problem.
There was problem with the encoding too (there was part of the font missing at the end, because of the bug in the program - I forgot to flush the buffered output stream), after then I was able to download the same copy of the TTF. - I didn't know about the possibility to put the entire url data to the location bar and try to download it, thanks cor-el.
But it still didn't solve the problem ... the problem was, that the base64 stream was divided to multiple lines, like
data:font/truetype;charset=utf-8;base64,
AAEAAAAYAQAABACARFNJRwMaCRYAC8m8AAAXfEdERUaJ+Y1JAAr/JAAAAsJHUE9T
e1arnwALAegAAKwaR1NVQt5CYFEAC64EAAAbmEpTVEZtKmkGAAvJnAAAAB5MVFNI
RExjrAAAN8wAAA1dT1MvMhAyXXMAAAIIAAAAYFBDTFT9ez5DAAr+7AAAADZWRE1Y
After I removed the line breaks, it works now! (the line is quite long then, because the base64 string is about 1MB, but it works)
Strange that I do the same for images (jpeg, png) and there is no problem with base64 string divided to multiple lines.
But anyway, I'm fine with that.

@font-face bug in FireFox 5 on Windows XP

Similar Messages

Maybe you are looking for