Bug 42571 – @font-face downloading proposal

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: CSS

[Jake Archibald]

This proposal is an attempt to normalise how browsers download fonts. Specifically for webkit, this will improve the experience for users on slower connections, or issues where a font takes a long time to download.

The proposal:

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.

Cheers,
Jake.

[Yuzo Fujishima]

How web font must be downloaded is defined at: http://dev.w3.org/csswg/css3-fonts/
Please see: https://bugs.webkit.org/show_bug.cgi?id=42154

As to how web font should be rendered, please see:
https://bugs.webkit.org/show_bug.cgi?id=25207

*** This bug has been marked as a duplicate of bug 42154 ***