1075108 - Webfonts downloaded multiple times on hard refresh

Status: UNCONFIRMED

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

Description

[random_developer]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20140912004004

Steps to reproduce:

1.) Visit a webpage that uses webfonts included via @font-face, that defines a local() resource name for the fonts, and that loads additional CSS files (after initial page render).
Examples:
- http://emgn.com/gaming/fifa-15-review/
- http://www.cnet.com/news/apple-iphone-6-vs-iphone-6-plus/
- http://www.sears.com (less noticeable)

2.) Hard reload the page with a Shift + Refresh. All of the text on the page (that uses custom webfonts) "blinks" once for each additional CSS file that's pulled in.

3.) Watch the Network tab in the web developer tools. The same set of fonts reload once for each additional CSS file that's pulled in.

4.) Reproduce after a hard page reload by running the following from the console. The text "blinks" once for each execution.
var myCssFile = document.createElement("link");
myCssFile.rel = "stylesheet";
myCssFile.href = "http://cdn.emgn.com/wp-content/themes/steam/css/bootstrap-non-responsive.css";
document.head.appendChild(myCssFile);


Actual results:

Firefox began to download the page resources, including the CSS file that contained @font-face definitions and corresponding font-family styles. Once the webfonts were downloaded, Firefox rendered the page's text. For every CSS file downloaded after that point, the text disappeared when the CSS file's download began and reappeared when the CSS file was processed, causing a "text blinking" effect. It became much more noticeable with CSS files that took 2s to download (network latency) as the page's text would disappear for the full 2s.

Each time the fonts blinked, the Network tab showed a new set of requests for all of the webfonts used on the page, which corresponded with a new CSS file being injected onto the page and requested by the browser. In local testing, this was reproduced on demand by injecting a CSS file onto the page via the console using the code referenced above. Also in local testing, this issue only occurred if the @font-face definitions included a local() resource name declaration; removing that seemed to resolve the issue. The issue could not be reproduced in Chrome or other browsers.


Expected results:

This only occurs with a hard refresh (not a first-view or a soft refresh) of the page, which is not common in the typical user's workflow. However, a hard refresh should not trigger a reload of all webfonts that were loaded within the same page load. It serves as a distracting visual disturbance and skews the networking/performance monitoring performed by web developers that rely on hard refreshing to simulate the experience of a first-view user visit.

Likely related to https://bugzilla.mozilla.org/show_bug.cgi?id=931752