678774 - @font-face overrides locally installed font even if it fails to download the font

Status: RESOLVED INVALID

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

Description

[Rob Crowther]

Attachment: Arial overriden by @font-face with invalid src

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:5.0.1) Gecko/20100101 Firefox/5.0.1
Build ID: 20110716083718

Steps to reproduce:

If a font face rule is specified but the font fails to download then the rule overrides a locally installed font.

This will result in paragraphs being rendered with the default serif font:

@font-face {
    font-family: Arial;
    src: url('DoesNotExist.ttf');
}
p {
    font-family: Arial;
}

Example: http://jsfiddle.net/robertc/UF23x/

But adding a local source leads to it being rendered in sans-serif:

@font-face {
    font-family: Arial;
    src: url('DoesNotExist.ttf'),
    src: local('Arial');
}
p {
    font-family: Arial;
}

Example: http://jsfiddle.net/robertc/UF23x/1/

As does leaving off the font-face altogether:

p {
    font-family: Arial;
}

Example: http://jsfiddle.net/robertc/UF23x/2/

This post on www-style indicates that if all the sources in a @font-face rule fail then "the effect is
equivalent to the omitting the @font-face rule definition" - which should mean the first example above should render identically to the last one:

http://lists.w3.org/Archives/Public/www-style/2010Jul/0253.html

But then this more recent comment disagrees with that description "even if a @font-face source is unusable, the rule should still mask any platform family with the same name":

https://bugzilla.mozilla.org/show_bug.cgi?id=623711#c2

The spec says: 'When font matching is done fonts defined using these rules are considered before other available fonts on a system' and 'Fonts containing invalid data or local font faces that are not found are ignored and the user agent loads the next font in the list' but doesn't seem to specify what should happen if all sources are invalid.

Comment 1

[Rob Crowther]

Attachment: Arial overriden by @font-face with invalid src plus local

Comment 2

[Rob Crowther]

Attachment: Arial not overriden by @font-face

Comment 3

[Alice0775 White]

Confirmed on 
http://hg.mozilla.org/mozilla-central/rev/9698a1031317
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0a1) Gecko/20110813 Firefox/8.0a1 ID:20110813030746
and
http://hg.mozilla.org/mozilla-central/rev/9698a1031317
Mozilla/5.0 (X11; Linux i686; rv:8.0a1) Gecko/20110813 Firefox/8.0a1 ID:20110813030746


regression window(cached m-c hourly)
works:
http://hg.mozilla.org/mozilla-central/rev/868be4c08700
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.2a1pre) Gecko/20110324 Firefox/4.2a1pre ID:20110324113150
fails:
http://hg.mozilla.org/mozilla-central/rev/2e161bb743d7
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.2a1pre) Gecko/20110324 Firefox/4.2a1pre ID:20110324122403
pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=868be4c08700&tochange=2e161bb743d7

Comment 4

[Alice0775 White]

In local build:
built from 533965e3b555 : fails
built from 72348a314f0b : works
built from 67d72a6a72f8 : fails
built from f39ad7e4054e : fails
built from ddc36fce0c76 : works
built from ff5717c3e48c : works

Triggered by:
533965e3b555	Jonathan Kew — Bug 623711 - erratic font selection with multiple @font-face rules and bad font resources; r=jdaggett

Comment 5

[Jonathan Kew [:jfkthame]]

(In reply to Rob Crowther from comment #0)
> This post on www-style indicates that if all the sources in a @font-face
> rule fail then "the effect is
> equivalent to the omitting the @font-face rule definition" - which should
> mean the first example above should render identically to the last one:
> 
> http://lists.w3.org/Archives/Public/www-style/2010Jul/0253.html

I don't think this was John's intended meaning there. He was responding to a different issue - with multiple @font-face rules combining to define a single family, using unicode-range, should failure of one of those rules cause the whole group to fail? His response confirmed that the other rules in the family should still apply; he was not addressing the question of whether to fall back to an installed font of the same name if all sources fail.

> But then this more recent comment disagrees with that description "even if a
> @font-face source is unusable, the rule should still mask any platform
> family with the same name":
> 
> https://bugzilla.mozilla.org/show_bug.cgi?id=623711#c2
> 
> The spec says: 'When font matching is done fonts defined using these rules
> are considered before other available fonts on a system' and 'Fonts
> containing invalid data or local font faces that are not found are ignored
> and the user agent loads the next font in the list' but doesn't seem to
> specify what should happen if all sources are invalid.

The current CSS3 ED text says: "If a font family defined via @font-face rules contains only invalid font data, it should be considered as if a font was present but contained an empty character map; matching a platform font with the same name must not occur in this case." It seems pretty clear to me that the intent is that family names defined via @font-face should always "mask" locally-installed fonts. It would be highly counter-intuitive to have some kinds of @font-face load failure (file not found) lead to use of the platform font, while other kinds of failure (file found but contains invalid data) lead to the next font in the CSS list being used instead.

So the current behavior (as per bug 623711) is by design, and I believe it both conforms to the spec and provides the most consistent and predictable behavior for users.

If you want the system's local Arial to be used as fallback if the @font-face source is unavailable, then either use a different family name:

  @font-face {
    font-family: MyArial;
    src: url(MyNonExistingArial.ttf);
  }
  body {
    font-family: MyArial, Arial;
  }

or else use a local source after the downloadable one within the rule's source list:

  @font-face {
    font-family: Arial;
    src: url(MyNonExistingArial.ttf), local(Arial);
  }

Comment 6

[Alice0775 White]

> @font-face load failure (file not found) lead to use of the platform font,
What does  "the platform font" mean?

Comment 7

[Jonathan Kew [:jfkthame]]

(In reply to Alice0775 White from comment #6)
> > @font-face load failure (file not found) lead to use of the platform font,
> What does  "the platform font" mean?

A locally-installed font found in the platform font list (as opposed to a resource loaded via @font-face).

Comment 8

[John Daggett (:jtd)]

Just a quick comment on the reason for specifying the behavior this way.  The intent is to assure that a page doesn't inadvertently pick up a font that happens to have the same name that an author has used for a family of downloadable fonts.  For example, if an author chooses to name a family 'Headline' and all the font loads fail, it shouldn't pick up a font called 'Headline' that happens to be available on a given user's machine, it should fallback to the next font family in the font list.  The behavior for a family of downloadable fonts called 'Arial' is an edge case test, it's not a common authoring pattern.

Comment 9

[Rob Crowther]

In the actual situation where I encountered the issue the font involved wasn't Arial, but I figured an example which involved some random font on my machine wouldn't be very useful :)

The reasoning does make practical sense, but I think the spec does need to be more clear on fallback within the @font-face rule vs fallback inside font-family and their interactions.  Of course, that's not an issue in Firefox.