Arial Black is the specified font for headers on my website; however, FF4 doesn't render out Arial Black whereas FF3.6 rendered it out perfectly along with other browsers. What's the deal?
I just upgraded to FF4 and was surprised to see that Arial Black wasn't rendering. My css validates and have never had an issue rendering our Arial Black on any browser - as of now FF4 is the only browser that doesn't support Arial Black. Chrome, Safari, IE9, and Opera all display my fonts as I specified in the css. Being a web designer I seek uniformity across all browsers.
All Replies (20)
After doing a bit of troubleshooting I found that removing the fall back fonts associated with the header css allows for Arial Black to display, but it's still not the proper Arial Black rendering. I have to add font-weight: bold in order for it to appear as thick as the Arial Black should appear as, but it's not the proper Arial Black display.
This is a major inconvenience and issue much like when Safari 2 would render every single font thicker than it should be - that issue was resolved in Safari 3.
Seems to be an issue with my Win7 64-bit system. Just upgraded my laptop that runs 32-bit Vista and there's no Arial Black display issues. Maybe re-installing FF4 can be a solution.
Having the same issue in Win7 64-bit. Will try an XP machine later.
Found the answer here . Changing the CSS to this should do the trick:
font-weight: 900;
font-family: "Arial Black", Arial, sans-serif;
Modified
Is this issue isolated to just Windows 7 64-bit in combo with FF4? Arial Black displays properly on all my Vista systems running FF4.
Can anyone verify that Arial Black displays properly on Windows 7 32-bit?
I just experimented with the addition of the font-weight and it does create the boldness of Arial Black but it also slightly increases it's pixels size and it may interfere with page layouts.
I experienced the problem in Firefox 4 on Windows 7 32Bit.
Thanks for the quick reply. That's such a disappointment to hear the issue is occurring in Win7 32-bit as well. Looks like I'm going to have to use Arial Black more sparingly when I design websites.
This is annoying. It works fine with FF4 on XP. Anyone try other similar fonts like Arial Narrow?
The quotations around Arial Black doesn't fix the issue. Remove the ', Arial, san-serif' and you will see. The browser is skipping to Arial, and that is why we have to add the font weight. Arial Black is a separate styling of Arial and technically not just bolded Arial.
During my troubleshooting I did leave Arial Black as the lone font and other variations - no quotes, no fallback, single apostrophes. FF4 displayed Times Roman instead even though Arial Black was specified.
Oh well, I've already started replacing Arial Black with Arial Bold on all my sites that use Arial Black.
This happens to me too. Firefox 4 no longer displays "Arial Black" as a font-family in CSS. Example line in CSS: font-family: "Arial Black",Gadget,sans-serif; after upgrading to FF4 no longer displays as Arial Black now it displays as Arial.
The solutions so far are not solutions, this is obviously a FF bug that needs attending to.
h1,h2,h3{font-family:"Arial Black",Arial,sans-serif;font-weight:900;} seems to render properly in FF4, IE9, Chrome and Safari under Win7 64.
FF4 ignores the Arial Black but uses font-weight:900, other browsers use Arial Black but ignore font-weight:900.
hi, I also have the same issue on my wondows 7 PC and not on the windows XP except it is with the font "cooper black" I had to downgrade to "cooper std" to have a workaround (which I'm not satisfied with)
"Arial Black" and "Arial Narrow" have been replaced by "Wide" and "Narrow" in Google Docs when I use Firefox4 on Windows 7 32-bit. "Wide" is definitely not a suitable replacement for "Arial Black", because they look nothing like each other.
Turning off Firefox's hardware acceleration fixes the problem.
All the solutions for Arial Black are unacceptable, especially since CSS3/HTML5 is allowing developers to include non-web safe fonts into websites. I thought the idea was progress not regression.
To ridicule the whole mess: So a web designer I'll have to add a disclaimer pop-up notice letting a user know that if they are using FF4 in comb with Win 7 that they need to turn off hardware acceleration to view the site properly. Reminds me of the days when sites had the disclaimer mentioning the site will work best on such-and-such browsers.
Ohh, I'm a Linux(Kubuntu) user and I thought it were a Linux problem. As a workaround I disabled the Arial Black font.
It is a problem in generally.
Who would have thought it?
I love FF but this is unbearable.
Regards
Otto
Modified
Adding font-weight: 900 OR font-weight: bold is not a solution, this makes arial black appear extra bold in other browsers which is not an answer.
FF4.01, Win7 x64. Same problem. Hunted around and found a recommendation to disable hardware acceleration in Tools|Options|Advanced. That worked for me without changing HTML or CSS. Haven't noticed any slowing in FF4; will keep an eye open for same and report any issues.
Of course, that doesn't solve the problem, because it only works for my browser. And I agree with all those who say that fiddling with the HTML or CSS is likely to create as many problems as it solves; the differences between one font and another are likely to be more than matters of just weight and stretch. In any case, if the rest of the world knows Arial Black as a separate font, why does FF have to be different?
Apparently the problem is that the accelerator (DirectWrite) does not recognise Arial Black as a separate font family from Arial. Someone obviously decided that what works in any other app. you could think of would not work in theirs.
Modified
I've updated to FF5, but the problem continues. The Mozilla Foundation does not comment about it? Why? There are no solution? Please, help us!