- From: John Daggett <jdaggett@mozilla.com>
- Date: Mon, 1 Feb 2016 13:34:01 +0900
- To: www-style <www-style@w3.org>
- Message-ID: <CALYZoVPP9yLLq_K3gAzP0tW2_JfLV819aiRhZsx2OrHveLJBiw@mail.gmail.com>
Support for 'font-display' behind a pref recently landed in Firefox [1]. Based on that experience I see a couple issues. The first is that font loading behavior is not explicitly defined for the 'fallback' and 'optional' values after the timeout expires. In either of these cases, if the timeout expires the webfont must not be shown. Regarding whether the load is aborted or continued, Tab's spec says [2]: "If the font is not retrieved before the two durations expire, the user agent may choose to abort the font download, or download it with a very low priority. If the user agent believes it would be useful for the user, it may avoid even starting the font download, and proceed immediately to using a fallback font." For 'optional', the Chrome implementation simply checks the cache to see if the resource has already been downloaded. No network request for the font resource is initiated. This means that if a given font resource is always defined with 'optional' for a given site, it will *never* be used on that site, since there is nothing that initiates and completes the font fetch. Chrome will only load the font when a user happened to land on a page that used the same font resource without 'optional' specified. One could imagine this happening with Open Sans from the Google Web Fonts site but not much else. The Firefox implementation lets the load run after the timeout so that the next time a page uses that resource it will be used. This might be a closer match for what authors want. The issue here is whether leaving this loosely defined is a good thing. It might be better to require one behavior or another, since this decision will affect whether fonts are displayed or not on subsequent page views. The other issue with 'font-display' is that it's now defined per font resource, rather than per font family, so the 'fallback' and 'optional' values have the potential to produce a ransom note effect where one face of a family is loaded but another one is not, depending upon font resource load timing. For example, if webfonts on a page use 'fallback' and the same font family is used for headings and body text, the bold face may download in time but the regular face may time out. Body text would appear in the fallback family but <strong> elements within the body text would appear in the bold face of the webfont. Rather than define an @font-face rule descriptor for font-display, it might be better to define a new @-rule like @font-feature-values that associates a value with a given set of families to avoid the ransom note effect: @bikeshed-me <font-family-name-list> { font-display: optional; } Regards, John Daggett [1] font-display in Firefox Available in Firefox 46+. To enable, set the 'layout.css.font-display.enabled' pref in about:config to true. [2] 'optional' description in Tab's spec https://tabatkins.github.io/specs/css-font-display/#valdef-font-face-font-display-optional
Received on Monday, 1 February 2016 04:34:32 UTC