{"action":"created","issue":{"url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/40","labels_url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/40/labels{/name}","comments_url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/40/comments","events_url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/40/events","html_url":"https://github.com/bramstein/fontfaceobserver/issues/40","id":115833475,"number":40,"title":"What to do with static sites?","user":{"login":"ismay","id":7355199,"avatar_url":"https://avatars.githubusercontent.com/u/7355199?v=3","gravatar_id":"","url":"https://api.github.com/users/ismay","html_url":"https://github.com/ismay","followers_url":"https://api.github.com/users/ismay/followers","following_url":"https://api.github.com/users/ismay/following{/other_user}","gists_url":"https://api.github.com/users/ismay/gists{/gist_id}","starred_url":"https://api.github.com/users/ismay/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ismay/subscriptions","organizations_url":"https://api.github.com/users/ismay/orgs","repos_url":"https://api.github.com/users/ismay/repos","events_url":"https://api.github.com/users/ismay/events{/privacy}","received_events_url":"https://api.github.com/users/ismay/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-11-09T08:57:19Z","updated_at":"2015-11-14T04:07:40Z","closed_at":null,"body":"I understand that it's a common solution to set a cookie and apply a class server side to prevent a FOUT when fonts are already loaded. But how would you solve this for static sites?\r\n\r\nRight now fontface observer is working very well, but because the html isn't processed server side, I've no way to add the `fontsLoaded` class before it reaches the client. So currently I'm seeing a FOUT for every page load (see https://ismaywolff.nl and https://github.com/ismay/ismaywolff.nl)"},"comment":{"url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/comments/156623648","html_url":"https://github.com/bramstein/fontfaceobserver/issues/40#issuecomment-156623648","issue_url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/40","id":156623648,"user":{"login":"robwierzbowski","id":925735,"avatar_url":"https://avatars.githubusercontent.com/u/925735?v=3","gravatar_id":"","url":"https://api.github.com/users/robwierzbowski","html_url":"https://github.com/robwierzbowski","followers_url":"https://api.github.com/users/robwierzbowski/followers","following_url":"https://api.github.com/users/robwierzbowski/following{/other_user}","gists_url":"https://api.github.com/users/robwierzbowski/gists{/gist_id}","starred_url":"https://api.github.com/users/robwierzbowski/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robwierzbowski/subscriptions","organizations_url":"https://api.github.com/users/robwierzbowski/orgs","repos_url":"https://api.github.com/users/robwierzbowski/repos","events_url":"https://api.github.com/users/robwierzbowski/events{/privacy}","received_events_url":"https://api.github.com/users/robwierzbowski/received_events","type":"User","site_admin":false},"created_at":"2015-11-14T04:07:40Z","updated_at":"2015-11-14T04:07:40Z","body":"I set a `sessionStorage` key to true on font load, then check it in an inline script in the head of the document. If it's true, I set a class on the document root (`html`) element. Works pretty well for single sessions (there's a FOUT every new session even if the font is in the cache, although it's really short), but there's no true connection between whether the font is in the cache and the `sessionStorage` value.\r\n\r\nIf you want to optimize for return visitors it seems like the best option is to use `localStorage` and re-implement caching by saving the font as base64 in CSS, and saving the CSS in `localStorage`."}}