{"action":"created","issue":{"url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/130","repository_url":"https://api.github.com/repos/filamentgroup/loadCSS","labels_url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/130/labels{/name}","comments_url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/130/comments","events_url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/130/events","html_url":"https://github.com/filamentgroup/loadCSS/issues/130","id":130315610,"number":130,"title":"Fonts on second load on IE11","user":{"login":"vijayaraghavanramanan","id":13736892,"avatar_url":"https://avatars.githubusercontent.com/u/13736892?v=3","gravatar_id":"","url":"https://api.github.com/users/vijayaraghavanramanan","html_url":"https://github.com/vijayaraghavanramanan","followers_url":"https://api.github.com/users/vijayaraghavanramanan/followers","following_url":"https://api.github.com/users/vijayaraghavanramanan/following{/other_user}","gists_url":"https://api.github.com/users/vijayaraghavanramanan/gists{/gist_id}","starred_url":"https://api.github.com/users/vijayaraghavanramanan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vijayaraghavanramanan/subscriptions","organizations_url":"https://api.github.com/users/vijayaraghavanramanan/orgs","repos_url":"https://api.github.com/users/vijayaraghavanramanan/repos","events_url":"https://api.github.com/users/vijayaraghavanramanan/events{/privacy}","received_events_url":"https://api.github.com/users/vijayaraghavanramanan/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2016-02-01T10:02:17Z","updated_at":"2016-02-07T17:26:58Z","closed_at":"2016-02-07T17:00:07Z","body":"@scottjehl as highlighted by [you,](https://www.filamentgroup.com/lab/font-events.html) the best way to load fonts in browsers is using loadCSS with woff links instead of data URIs, fontfaceobserver with classes and cookies to set html class to fonts-loaded by default on second load. This approach is like the upcoming `font-display:swap` for old browsers. \r\n\r\nBut even if I don't use this, I have observed that on second load, loading fonts using loadCSS used to neither FOUT not FOIT on second load as the css file is in the cache and loadCSS finishes super fast. \r\n\r\nHowever, in the new changes done a few days ago, the part where the code waits for body to become available - the code specific to IE11. I have observed that because of this, IE11's fonts css with @font-face  links to woff files changes media slightly later. This has the effect of a flash of a FOUT. (more like characters/glyphs jiggling)\r\n\r\nAlthough I haven't tested, I think even if one were to include fontfaceobserver, cookies, classes, the issue won't go away. IE11 is unbelievably fast in start render and might start to render even before the browser sees a @font-face declaration. This is fine on first load but not optimized for second load, as previously. \r\n\r\nI don't have a demo, as I have made changes on my site. Feel free to close the issue but can you please keep this in mind when doing your tests?"},"comment":{"url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/comments/181056246","html_url":"https://github.com/filamentgroup/loadCSS/issues/130#issuecomment-181056246","issue_url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/130","id":181056246,"user":{"login":"aFarkas","id":188254,"avatar_url":"https://avatars.githubusercontent.com/u/188254?v=3","gravatar_id":"","url":"https://api.github.com/users/aFarkas","html_url":"https://github.com/aFarkas","followers_url":"https://api.github.com/users/aFarkas/followers","following_url":"https://api.github.com/users/aFarkas/following{/other_user}","gists_url":"https://api.github.com/users/aFarkas/gists{/gist_id}","starred_url":"https://api.github.com/users/aFarkas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aFarkas/subscriptions","organizations_url":"https://api.github.com/users/aFarkas/orgs","repos_url":"https://api.github.com/users/aFarkas/repos","events_url":"https://api.github.com/users/aFarkas/events{/privacy}","received_events_url":"https://api.github.com/users/aFarkas/received_events","type":"User","site_admin":false},"created_at":"2016-02-07T17:26:58Z","updated_at":"2016-02-07T17:26:58Z","body":"@vijayaraghavanramanan \r\nThis doesn't solve the underlying problem. Waiting for `document.body` in all browsers means, that there is a long time between calling loadCSS and starting the actual download.\r\n\r\nYour workaround only works because you don't use loadCSS in cached situations anymore. If you would check a network waterfall in empty cache situations you will see downloads of async CSS is not only async it is heavily delayed (delayed until normal CSS is fully downloaded)."}}