[csswg-drafts] [css-fonts] Address missing aspect of Progressive Enhancement in font loading

jpamental has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css-fonts] Address missing aspect of Progressive Enhancement in 
font loading ==
Not entirely sure if this is the right place to post, but @litherum 
suggested this might be a place to start.

**The Issue**
Loading web fonts creates an uneven experience, either in waiting for 
fonts to load and displaying fallbacks that don't exactly match 
(width/height/etc) causing text reflow when the web fonts finally 
load. Using `font-display` helps even out loading behavior, but that 
only allows us to get fallback fonts in use faster; it doesn't let us 
style them. That's the key to mitigating FOUT: style the fallback text
 using `letter-spacing` `font-size` `line-height` etc so that the 
difference when the web fonts finally load is minimized. Currently we 
have to rely upon JS to switch classes, but if there were some way in 
CSS to target the state when web fonts haven't loaded we could remove 
the reliance upon JS and be more fully embracing the concept of 
Progressive Enhancement (especially since support of JS and 
`@font-face` are not necessarily tied).

For the most thorough PE approach, we should strive for:

1) No CSS, no JS, no web fonts: just the content
2) CSS loads, but no JS or web fonts: fallbacks should be styled to 
minimize the difference between them and the eventual web fonts (this 
is handled in my example below by scoping the fallback styles behind 
the `wf-inactive` class)
3) CSS and web fonts: we get the design rendered as intended 
(requiring that the `wf-inactive` class goes away)
4) CSS, JS & web fonts: we get the smoothest experience by having 
control over those classes and can also use the session storage 
variable to get the browser to render the web fonts with less 
hesitation

`font-display` when supported helps _show_ the content in the fallback
 fonts faster, but we’re still stuck relying on JS to either insert or
 remove the CSS class that would control whether or not the web fonts 
would be referenced and how we can target the CSS styling based on web
 fonts being present or not at the time.

Example of using the loading class to style fallbacks:
```css
p {
    font-family: 'Alegreya', Georgia, serif;
    font-size: 1em;
}

.wf-inactive p {
    font-family: Georgia, serif;
    font-size: 0.975em;
    letter-spacing: -0.4px;
}
```

Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/450 using your GitHub 
account

Received on Wednesday, 7 September 2016 13:10:02 UTC