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

Support Forum

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?

Posted

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.

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.

Additional System Details

Sites Affected

http://www.hectorarandawebworx.com/main/

Installed Plug-ins

  • Garmin Communicator Plug-In 2.9.3.0
  • Office Plugin for Netscape Navigator
  • npdnu
  • npdnupdater2
  • The QuickTime Plugin allows you to view a wide variety of multimedia content in Web pages. For more information, visit the QuickTime Web site.
  • Adobe PDF Plug-In For Firefox and Netscape "9.4.2"
  • Google Update
  • Shockwave Flash 10.2 r152
  • iTunes Detector Plug-in
  • GEPlugin
  • 4.0.60129.0
  • NVIDIA 3D Vision plugin for Mozilla browsers
  • NVIDIA 3D Vision Streaming plugin for Mozilla browsers
  • Next Generation Java Plug-in 1.6.0_16 for Mozilla browsers

Application

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

More Information

Question owner

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.

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.

Question owner

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.

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.
Bjorn2404 0 solutions 3 answers

Having the same issue in Win7 64-bit. Will try an XP machine later.

Having the same issue in Win7 64-bit. Will try an XP machine later.
TellMeWhereIsGandalf 0 solutions 2 answers

Helpful Reply

Found the answer here . Changing the CSS to this should do the trick:

font-weight: 900;

font-family: "Arial Black", Arial, sans-serif;

Found the answer [http://www.neowin.net/forum/topic/971376-firefox-displays-my-site-incorrectly-other-browsers-fine/page__p__593634608#entry593634608 here] . Changing the CSS to this should do the trick: font-weight: 900; font-family: "Arial Black", Arial, sans-serif;

Modified by TellMeWhereIsGandalf

Question owner

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?

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?

Question owner

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 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.
TellMeWhereIsGandalf 0 solutions 2 answers

I experienced the problem in Firefox 4 on Windows 7 32Bit.

I experienced the problem in Firefox 4 on Windows 7 32Bit.

Question owner

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.

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.
Bjorn2404 0 solutions 3 answers

This is annoying. It works fine with FF4 on XP. Anyone try other similar fonts like Arial Narrow?

This is annoying. It works fine with FF4 on XP. Anyone try other similar fonts like Arial Narrow?
yermeyahoo 0 solutions 1 answers

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.

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.

Question owner

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.

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.
mesonto 0 solutions 4 answers

Helpful Reply

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.

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.
Tony_Slack 0 solutions 1 answers

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.

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.
fmadre 0 solutions 1 answers

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)

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)
dkoppenh 0 solutions 1 answers

"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.

"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.

Question owner

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.

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.
otto06217 0 solutions 1 answers

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

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 by otto06217

DigitalOutback 0 solutions 2 answers

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.

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.
DavidHB 0 solutions 1 answers

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.

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 by DavidHB

rbiagini 0 solutions 1 answers

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!

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!