{"action":"created","issue":{"url":"https://api.github.com/repos/w3c/csswg-drafts/issues/450","repository_url":"https://api.github.com/repos/w3c/csswg-drafts","labels_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/450/labels{/name}","comments_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/450/comments","events_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/450/events","html_url":"https://github.com/w3c/csswg-drafts/issues/450","id":175498311,"number":450,"title":"[css-fonts] Address missing aspect of Progressive Enhancement in font loading","user":{"login":"jpamental","id":537413,"avatar_url":"https://avatars.githubusercontent.com/u/537413?v=3","gravatar_id":"","url":"https://api.github.com/users/jpamental","html_url":"https://github.com/jpamental","followers_url":"https://api.github.com/users/jpamental/followers","following_url":"https://api.github.com/users/jpamental/following{/other_user}","gists_url":"https://api.github.com/users/jpamental/gists{/gist_id}","starred_url":"https://api.github.com/users/jpamental/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jpamental/subscriptions","organizations_url":"https://api.github.com/users/jpamental/orgs","repos_url":"https://api.github.com/users/jpamental/repos","events_url":"https://api.github.com/users/jpamental/events{/privacy}","received_events_url":"https://api.github.com/users/jpamental/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2016-09-07T13:09:51Z","updated_at":"2016-09-07T19:53:07Z","closed_at":null,"body":"Not entirely sure if this is the right place to post, but @litherum suggested this might be a place to start.\r\n\r\n**The Issue**\r\nLoading 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).\r\n\r\nFor the most thorough PE approach, we should strive for:\r\n\r\n1) No CSS, no JS, no web fonts: just the content\r\n2) 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)\r\n3) CSS and web fonts: we get the design rendered as intended (requiring that the `wf-inactive` class goes away)\r\n4) 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\r\n\r\n`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.\r\n\r\nExample of using the loading class to style fallbacks:\r\n```css\r\np {\r\n    font-family: 'Alegreya', Georgia, serif;\r\n    font-size: 1em;\r\n}\r\n\r\n.wf-inactive p {\r\n    font-family: Georgia, serif;\r\n    font-size: 0.975em;\r\n    letter-spacing: -0.4px;\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/w3c/csswg-drafts/issues/comments/245396662","html_url":"https://github.com/w3c/csswg-drafts/issues/450#issuecomment-245396662","issue_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/450","id":245396662,"user":{"login":"jpamental","id":537413,"avatar_url":"https://avatars.githubusercontent.com/u/537413?v=3","gravatar_id":"","url":"https://api.github.com/users/jpamental","html_url":"https://github.com/jpamental","followers_url":"https://api.github.com/users/jpamental/followers","following_url":"https://api.github.com/users/jpamental/following{/other_user}","gists_url":"https://api.github.com/users/jpamental/gists{/gist_id}","starred_url":"https://api.github.com/users/jpamental/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jpamental/subscriptions","organizations_url":"https://api.github.com/users/jpamental/orgs","repos_url":"https://api.github.com/users/jpamental/repos","events_url":"https://api.github.com/users/jpamental/events{/privacy}","received_events_url":"https://api.github.com/users/jpamental/received_events","type":"User","site_admin":false},"created_at":"2016-09-07T19:53:07Z","updated_at":"2016-09-07T19:53:07Z","body":"I should have clarified that this is generally done by inserting a class like 'wf-loading' on the HTML element during the loading process, and once the web fonts have loaded, removing the 'wf-loading' class and replacing it with 'wf-loaded'"}}
{"actor":{"display_login":"jpamental"}}