issues with font-display

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