{"action":"created","issue":{"url":"https://api.github.com/repos/kelyvin/caffeine-theme/issues/4","repository_url":"https://api.github.com/repos/kelyvin/caffeine-theme","labels_url":"https://api.github.com/repos/kelyvin/caffeine-theme/issues/4/labels{/name}","comments_url":"https://api.github.com/repos/kelyvin/caffeine-theme/issues/4/comments","events_url":"https://api.github.com/repos/kelyvin/caffeine-theme/issues/4/events","html_url":"https://github.com/kelyvin/caffeine-theme/pull/4","id":153668604,"number":4,"title":"Optimise font loading","user":{"login":"andrewlock","id":18755388,"avatar_url":"https://avatars.githubusercontent.com/u/18755388?v=3","gravatar_id":"","url":"https://api.github.com/users/andrewlock","html_url":"https://github.com/andrewlock","followers_url":"https://api.github.com/users/andrewlock/followers","following_url":"https://api.github.com/users/andrewlock/following{/other_user}","gists_url":"https://api.github.com/users/andrewlock/gists{/gist_id}","starred_url":"https://api.github.com/users/andrewlock/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andrewlock/subscriptions","organizations_url":"https://api.github.com/users/andrewlock/orgs","repos_url":"https://api.github.com/users/andrewlock/repos","events_url":"https://api.github.com/users/andrewlock/events{/privacy}","received_events_url":"https://api.github.com/users/andrewlock/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2016-05-08T17:52:57Z","updated_at":"2016-05-09T15:41:21Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/kelyvin/caffeine-theme/pulls/4","html_url":"https://github.com/kelyvin/caffeine-theme/pull/4","diff_url":"https://github.com/kelyvin/caffeine-theme/pull/4.diff","patch_url":"https://github.com/kelyvin/caffeine-theme/pull/4.patch"},"body":"I have been experimenting with improving the font loading experience using WebFontLoader, and FontFaceObserver and I think I've got pretty much the best options here now. \r\n\r\nIn order to avoid the Flash of Invisible Text on Safari, I have added explicit fallback fonts, and only use the web fonts once it's finished loading.\r\n\r\nThis still leaves the Flash of Unstyled Text but I've tried to optimise that too - session storage is used to store a flag to indicate the fonts have already been loaded, and a small script in the head applies the necessary class immediately if necessary which should prevent the FOUT completely on subsequent loads.\r\n\r\nWhat do you think?"},"comment":{"url":"https://api.github.com/repos/kelyvin/caffeine-theme/issues/comments/217902025","html_url":"https://github.com/kelyvin/caffeine-theme/pull/4#issuecomment-217902025","issue_url":"https://api.github.com/repos/kelyvin/caffeine-theme/issues/4","id":217902025,"user":{"login":"andrewlock","id":18755388,"avatar_url":"https://avatars.githubusercontent.com/u/18755388?v=3","gravatar_id":"","url":"https://api.github.com/users/andrewlock","html_url":"https://github.com/andrewlock","followers_url":"https://api.github.com/users/andrewlock/followers","following_url":"https://api.github.com/users/andrewlock/following{/other_user}","gists_url":"https://api.github.com/users/andrewlock/gists{/gist_id}","starred_url":"https://api.github.com/users/andrewlock/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andrewlock/subscriptions","organizations_url":"https://api.github.com/users/andrewlock/orgs","repos_url":"https://api.github.com/users/andrewlock/repos","events_url":"https://api.github.com/users/andrewlock/events{/privacy}","received_events_url":"https://api.github.com/users/andrewlock/received_events","type":"User","site_admin":false},"created_at":"2016-05-09T15:41:21Z","updated_at":"2016-05-09T15:41:21Z","body":"Thinking about this a little more, I wonder if my desire to completely remove the FOUT is due to my experience when developing. Sometimes I would realise I wasn't using the browsersync, and hit refresh to see changes, and would be hit with the ugly FOUT each time. With the changes in this PR, that's gone away completely.\r\n\r\nHowever most users presumably won't be hitting refresh. If they just click around the site, they won't be seeing the FOUT everywhere anyway as we're not doing full server side reloads.\r\n\r\nSo maybe the best compromise  is to remove the last 2 commits of the PR? That way Safari users get the benefit of a FOUT instead of FOIT and the page-speed-index is unaffected, but the FOUT is always there for subsequent full page loads, even though the fonts are technically loaded. \r\n\r\nEither that or we look at inlining the google @font-face rules directly in the head to get the overall best results as per [here](https://www.filamentgroup.com/lab/font-events.html)."}}