644385 - Arial Narrow, Arial Black fonts do not show on page

Status: RESOLVED DUPLICATE of bug 835204

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

Description

[Chris]

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

Comment 1

[Florin Strugariu [:Bebe]]

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

Comment 2

[Chris]

I've created a file showing only this bug: http://www.pureformsolutions.com/tmp/font.htm

Comment 3

[Florin Strugariu [:Bebe]]

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

Comment 4

[Greg Edwards]

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.

Comment 5

[Greg Edwards]

The above screenshot is incorrect. Please see: http://puu.sh/1k1K

Comment 6

[Florin Strugariu [:Bebe]]

Attachment: It works for me with a clean profile

Comment 7

[Chris]

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?

Comment 8

[John Daggett (:jtd)]

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.

Comment 9

[Chris]

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

Comment 10

[John Daggett (:jtd)]

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.

Comment 11

[Chris]

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 :-)

Comment 12

[John Daggett (:jtd)]

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.

Comment 13

[Bjorn]

If IE9 is also using DirectWrite then why can it render Arial Black without adding the extra font-weight?

Comment 14

[John Daggett (:jtd)]

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

Comment 15

[Greg Edwards]

Web developers have been coding font families this way since forever. This should be fixed, as in IE9.

Comment 16

[:aceman]

I think this bug can be marked confirmed with those comments and dependencies.

Comment 17

[Jonathan Kew [:jfkthame]]

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

Comment 18

[:aceman]

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?

Comment 19

[Jason]

(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).

Comment 20

[Johnwey]

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?

Comment 21

[Jeffery Seiffert]

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?

Comment 22

[John Daggett (:jtd)]

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

Comment 23

[John Daggett (:jtd)]

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.

Comment 25

[hecate4stuff]

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?

Comment 26

[John Daggett (:jtd)]

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

Comment 27

[hecate4stuff]

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

Comment 28

[Ralf Scheidhauer]

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.

Comment 29

[Jonathan Kew [:jfkthame]]

Did you try

  ctx.font='condensed 30px Arial';

(Untested, but seems like it might work.)

Comment 30

[Ralf Scheidhauer]

(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/

Comment 31

[Jonathan Kew [:jfkthame]]

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

Comment 32

[Jonathan Kew [:jfkthame]]

And sure enough, that's bug 1057680.

Comment 33

[Ralf Scheidhauer]

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

Comment 34

[Jonathan Kew [:jfkthame]]

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.

Comment 35

[Ralf Scheidhauer]

Thanks for that hint: I'll give it a try and let you know whether it solves my problem ...

Comment 36

[Ralf Scheidhauer]

... now I tried it and it works fine, thanks again for your help!