Closed Bug 644385 Opened 13 years ago Closed 10 years ago

Arial Narrow, Arial Black fonts do not show on page

Categories

(Core :: Layout: Text and Fonts, defect)

Product:
Core
Component:
Layout: Text and Fonts
Version:
2.0 Branch
Platform:
x86_64
Windows 7
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 835204

People

(Reporter: Chris, Unassigned)

References

(
URL
)

Details

Attachments

(1 file)

It works for me with a clean profile
196.69 KB, image/png
Details 
User-Agent:       Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0
Build Identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0

Arial Narrow / Black is not being shown when it should be. The next font in the CSS rule is shown instead. I have confirmed that I have the font installed and it displays correctly in Chrome [on Windows 7] and Firefox 3.6 [on Vista]. Also, the font is not displayed as a default Sans-Serif options in the settings...

Fx 3.6 on vista: http://www.pureformsolutions.com/tmp/fx3.6-vista.png
Fx 4 on windows 7: http://www.pureformsolutions.com/tmp/fx4-w7.png

Reproducible: Always

Steps to Reproduce:
1. View any page using Arial Narrow / Black as a font face
2. http://www.colourlovers.com/ is one of them, the tabs "All, Wedding, Home" etc are all Arial Narrow yet render as the next rule, Arial.
Actual Results:  
The next font in the rule is shown, Arial.

Expected Results:  
It should have shown Arial Narrow.

The rule for the tabs is: font: 14px/20px 'arial narrow',arial,sans-serif
The text has a CSS property font: 12px/20px helvetica,arial,sans-serif that sets the font to Arial, not Arial Narrow


Could you provide a specific testcase
I've created a file showing only this bug: http://www.pureformsolutions.com/tmp/font.htm
For a font to be displayed it has to be installed.
Arial Narrow  it is not installed by default in Windows ( All platforms)
After I installed it it displayed correctly on

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

Please try to install it and check again http://bit.ly/gXo8q1

Thanks
Replicated with Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0

http://puu.sh/1k1B

Helvetica Narrow is also missing. Both fonts are available in Firefox 3.6 and IE9. This problem persists regardless of font rendering method.
The above screenshot is incorrect. Please see: http://puu.sh/1k1K
Like I outlined in the report, I also have the font installed and the fonts are available in other browsers. Shouldn't this work with just an upgrade from 3.6 to 4.0?
When DirectWrite rendering is used rather than GDI rendering, font families are grouped differently, Arial Narrow and Arial Black are treated as different faces of the Arial family.  If you look at the fonts folder on a Windows 7 machine you won't find either 'Arial Black' or 'Arial Narrow' as font *families*, they're mixed in with other Arial faces.
So, how do I go about accessing these fonts? BTW, I just upgraded to firefox 4 on my Vista machine with the same results.

Here's a screen shot of the test page: http://www.pureformsolutions.com/tmp/firefox-4.0-vista.png

Here are the fonts I have installed: http://www.pureformsolutions.com/tmp/vista-fonts.png
Arial Black is the 900 weight of the Arial family.  So use:

  font-family: Arial Black, Arial;
  font-weight: 900;

This will work in both older clients like Chrome that use GDI and newer clients that use DirectWrite like FF4 and IE9.

Does Arial Narrow show up under the Arial family on your machine?  I don't see Arial Narrow on my Win7 machine so I can't confirm that.
Yes, on Win7 it does: http://www.pureformsolutions.com/tmp/win7-fonts.png

It's also on my Vista machine: http://www.pureformsolutions.com/tmp/vista-fonts.png but not in the family grouping.

Either way the font doesn't show up on either system in fx4. Is there a way around this using css like with Arial Black, or am I hosed? Arial Narrow is actually the font I need to use.

Thanks for the response :-)
The right way, which I think will work for IE9, is:

  font-family: Arial Narrow, Arial;
  font-stretch: condensed;

Unfortunately we haven't completed the implementation of font-stretch.  So the workaround would be to use src: local() in an @font-face rule (gross, i know):

  @font-face {
    font-family: LocalArialNarrow;
    src: local("Arial Narrow");
  }

  font-family: Arial Narrow, LocalArialNarrow, Arial;
  font-stretch: condensed;

I think that should work in IE9, FF4, and other GDI-based browsers.
Depends on: font-stretch
If IE9 is also using DirectWrite then why can it render Arial Black without adding the extra font-weight?
Argh, it does indeed look like IE9 added a compatibility hack to *also* support Arial Black and Arial Narrow.

  http://people.mozilla.org/~jdaggett/tests/arialblackweights.html

Note the 800, 900 weights of Arial (== Arial Black).
Depends on: 584769
Web developers have been coding font families this way since forever. This should be fixed, as in IE9.
Version: unspecified → 4.0 Branch
I think this bug can be marked confirmed with those comments and dependencies.
Status: UNCONFIRMED → NEW
Component: General → Layout: Text
Ever confirmed: true
Product: Firefox → Core
QA Contact: general → layout.fonts-and-text
Version: 4.0 Branch → 2.0 Branch
(In reply to comment #12)
> The right way, which I think will work for IE9, is:
> 
>   font-family: Arial Narrow, Arial;
>   font-stretch: condensed;
> 
> Unfortunately we haven't completed the implementation of font-stretch.

data:text/html,<div style="font-family:arial; font-size:36px; font-stretch: condensed">hello world

This WFM on Win7 (with Arial Narrow installed) using either Fx4.0.1 or my local Nightly build; results in the Narrow face, as expected.
There can be a workaround for this problem. However, is it good that the rendering depends on whether DirectWrite is used or not? Users probably expect the rendering to be the same, just accelerated. Can this be fixed, or is it an unfortunate tradeoff?
(In reply to aceman from comment #18)
> There can be a workaround for this problem. However, is it good that the
> rendering depends on whether DirectWrite is used or not? Users probably
> expect the rendering to be the same, just accelerated. Can this be fixed, or
> is it an unfortunate tradeoff?

I agree.  Also, I did some checking <http://msdn.microsoft.com/en-us/library/dd371554%28VS.85%29.aspx>.  According to this article, DirectWrite should be implemented in such a way so that a font-family call of "Arial Black" should result in Arial Black being displayed.  Unfortunately the article is not terribly specific to that point.  However, that is what I get out of the diagram (midway down the page).
I don't understand any of this hacking/modding or whatever it is you guys are talking about -- Directwrite, font-family stuff and all that.

I just know every time a client comes in to see his new website Ariel Narrow and Ariel Black don't display in Firefox, but they do display in Internet Explorer.

So I figure it's a Firefox problem.

When will it be fixed?
I did a check of all the latest major browsers and FF 15, don't know about earlier, is the only browser that doesn't product Arial Black correctly. This needs to be fixed, from what I read this has been going on for a long time now. What am I supposed to tell my clients why it works in all the other browsers and not Firefox?
(In reply to Jeffery Seiffert from comment #21)
> I did a check of all the latest major browsers and FF 15, don't know about
> earlier, is the only browser that doesn't product Arial Black correctly.
> This needs to be fixed, from what I read this has been going on for a long
> time now. What am I supposed to tell my clients why it works in all the
> other browsers and not Firefox?

Tell your clients to use the 900 weight of Arial (which is the family into which the DirectWrite system API is sticking the "Arial Black" face):

  font-family: Arial Black, Arial;
  font-weight: 900;

IE is using this system API but has hacked it to emulate the "Arial Black", "Arial Narrow" separate families that are present under GDI.
Chrome has now enabled DirectWrite when that is available and so they also will treat Arial Narrow and Arial Black as faces of Arial. To handle this, authors should use the style rules given in comment 22.
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → INVALID
Still having this same problem with Arial Narrow not showing; FF is substituting Arial. I've just read a tip to use font-stretch:condensed but am afraid that adding that will further condense the Arial Narrow that displays correctly in all other browsers besides FF. It honestly seems to me that fixing this vs. having to use workarounds just for FF is the way to go?
(In reply to hecate4stuff from comment #25)
> Still having this same problem with Arial Narrow not showing; FF is
> substituting Arial. I've just read a tip to use font-stretch:condensed but
> am afraid that adding that will further condense the Arial Narrow that
> displays correctly in all other browsers besides FF. It honestly seems to me
> that fixing this vs. having to use workarounds just for FF is the way to go?

This is caused by differences in the way fonts are grouped into families. The faces that were previously grouped into separate families, Arial Black and Arial Narrow, are now contained within Arial.

Use the code below to reference the condensed face of Arial across *all* implementations, Firefox, Chrome, Safari, etc., regardless of whether the new or old grouping is used:

  font-family: Arial Narrow, Arial;
  font-stretch: condensed;

Note that the 'font-stretch' property is a font *selection* parameter, it does not artificially apply any form of horizontal transform to the font selected. So it will not "further condense" anything.
(In reply to John Daggett (:jtd) from comment #26)
> Note that the 'font-stretch' property is a font *selection* parameter, it
> does not artificially apply any form of horizontal transform to the font
> selected. So it will not "further condense" anything.

Thank you, John, I've just discovered that for myself by trying it out. It now works in FF without messing up the display in all the other browsers. Just a gentle vote (along with many others, I know) that perhaps FF should reconsider since Arial Narrow (and some others) are for most of us separate installed fonts. But you are right, they look the same now in FF and IE and Chrome, etc. I just have an aversion to "tweaking" for specific browsers, etc. and join with many in my dream of one standard for all :). Thanks!
Has anyone any idea on how to get Arial Narrow being correctly drawn on a HTML5 canvas?

For Arial Black it worked by providing a font-weight as proposed somewhere above like:

    ...
    ctx.font='800 30px Arial';
    ctx.fillText('Hello World', 10,30);

But I don't know how to specify font-stretch as condensed in an HTML5 canvas.
Did you try

  ctx.font='condensed 30px Arial';

(Untested, but seems like it might work.)
(In reply to Jonathan Kew (:jfkthame) from comment #29)
> Did you try
> 
>   ctx.font='condensed 30px Arial';
> 
> (Untested, but seems like it might work.)

Thanks, for the hint, but I did try this already without success:
     http://jsfiddle.net/dv6241ka/4/
Ah, sorry -- it looks like the 'font' shorthand doesn't support that. It's specified as being allowed in the current CSS Fonts spec draft[1], but was not present in CSS 2.1, and apparently Gecko (at least) doesn't yet support the more complete version of 'font'; see [2].

[1] http://www.w3.org/TR/css3-fonts/#font-prop
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/font
And sure enough, that's bug 1057680.
Thanks again for the info!

So it seems that currently there is no way to properly display Arial Narrow in an HTML5 canvas in Firefox ...
Well, in principle you can do it by using @font-face to load the Arial Narrow face (specified by its full name) as a user font with a separate family name:

  @font-face {
    font-family: MyArialNarrow;
    src: local("Arial Narrow");
  }

and then using the MyArialNarrow name in the canvas font property. But for that to work, you'll also need to ensure that the user font actually gets loaded (either by using it for some fragment of HTML text, or using the CSS font loading API) *before* running the script that wants to use it in canvas drawing. So it's a rather cumbersome workaround.
Thanks for that hint: I'll give it a try and let you know whether it solves my problem ...
... now I tried it and it works fine, thanks again for your help!
Blocks: 1321535
Resolution: INVALID → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: