579916 - @font-face downloading proposal

Status: RESOLVED DUPLICATE of bug 510439

(Core :: CSS Parsing and Computation, enhancement)

Description

[Jake Archibald]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.99 Safari/533.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:2.0b1) Gecko/20100630 Firefox/4.0b1

This proposal is an attempt to normalise how browsers download fonts. Specifically for Gecko, this will reduce unnecessary downloads and prevent the user seeing a flash of another font.

Fonts should only be downloaded if a visible element on the page requires it. IE<9 breaks this rule.

In the declaration "font-family: 'FontA', 'FontB'", FontB should only be downloaded if a matching element contains chars not found in FontA. Firefox, Opera & IE break this rule.

While the font is downloading, the target text is hidden but reserves space on the page, based on the size of a fallback font. Eg, in the declaration "font-family: 'FontA', arial, sans-serif" the space would be reserved for the text in arial, but no text would be displayed. Once the font has downloaded, the text is shown using the downloaded font. This avoids FOUT. Firefox, Opera & IE break this rule.

If the font has not downloaded within 1 or 2 seconds, the text is displayed in a fallback font. Eg, in the declaration "font-family: 'FontA', arial, sans-serif", the text would be displayed in arial. Once the font has downloaded, the text is shown using the downloaded font. This allows the user to view content even if the font is downloading slowly (mobile connection, slow server). No browsers do this, although IE, Firefox & Opera do this but without waiting. This is inspired by how Opera loads CSS, which displays unstyled content if the CSS fails to load within 2 seconds.

Reproducible: Always

Comment 1

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

(In reply to comment #0)
> While the font is downloading, the target text is hidden but reserves space on
> the page, based on the size of a fallback font. Eg, in the declaration
> "font-family: 'FontA', arial, sans-serif" the space would be reserved for the
> text in arial, but no text would be displayed. Once the font has downloaded,
> the text is shown using the downloaded font. This avoids FOUT. Firefox, Opera &
> IE break this rule.
> 
> If the font has not downloaded within 1 or 2 seconds, the text is displayed in
> a fallback font. Eg, in the declaration "font-family: 'FontA', arial,
> sans-serif", the text would be displayed in arial. Once the font has
> downloaded, the text is shown using the downloaded font. This allows the user
> to view content even if the font is downloading slowly (mobile connection, slow
> server). No browsers do this, although IE, Firefox & Opera do this but without
> waiting. This is inspired by how Opera loads CSS, which displays unstyled
> content if the CSS fails to load within 2 seconds.

This is very user-unfriendly. I do not want to wait 2 seconds to start reading because a designer thought the font to be more important than the content.

Comment 2

[Jake Archibald]

The currently behaviour in webkit is to wait until the font has downloaded and a lot of people seem to agree that that's the 'right way'. I'd rather see text sooner, but I agree that seeing a quick jolt of text isn't great either.

I put "1 or 2" seconds, but perhaps half a second would be enough to eliminate the FOUT for fast loading fonts but still gets users their content if the font loads slowly.

Comment 3

[Boris Zbarsky [:bzbarsky]]

This sounds like a tracking bug which needs specific bugs blocking it on the specific changes proposed.

For example, we have been considering something like your proposal 3.  I'm not sure what the implications of proposal 2 are (but ccing John for his thoughts).

Comment 4

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

(In reply to comment #2)
> The currently behaviour in webkit is to wait until the font has downloaded and
> a lot of people seem to agree that that's the 'right way'. I'd rather see text
> sooner, but I agree that seeing a quick jolt of text isn't great either.

And a lot of people disagree with those people, too.

Comment 5

[Robert O'Callahan (:roc) (email my personal email if necessary)]

(In reply to comment #0)
> In the declaration "font-family: 'FontA', 'FontB'", FontB should only be
> downloaded if a matching element contains chars not found in FontA. Firefox,
> Opera & IE break this rule.

We have implemented this. It works in simple cases. If you have a testcase that shows we're not doing this right, please file it as a separate bug.

> While the font is downloading, the target text is hidden but reserves space on
> the page, based on the size of a fallback font. Eg, in the declaration
> "font-family: 'FontA', arial, sans-serif" the space would be reserved for the
> text in arial, but no text would be displayed. Once the font has downloaded,
> the text is shown using the downloaded font. This avoids FOUT. Firefox, Opera
> & IE break this rule.
> 
> If the font has not downloaded within 1 or 2 seconds, the text is displayed in
> a fallback font. Eg, in the declaration "font-family: 'FontA', arial,
> sans-serif", the text would be displayed in arial. Once the font has
> downloaded, the text is shown using the downloaded font. This allows the user
> to view content even if the font is downloading slowly (mobile connection,
> slow server). No browsers do this, although IE, Firefox & Opera do this but
> without waiting. This is inspired by how Opera loads CSS, which displays
> unstyled content if the CSS fails to load within 2 seconds.

I agree we should do this. Bug 499292 covers this.

Comment 6

[John Daggett (:jtd)]

Yes, this is a byproduct of the way we the load, looking up a font effectively sparks the load.  We need to limit this to one font loading per font group.