{"action":"created","issue":{"url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/35","labels_url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/35/labels{/name}","comments_url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/35/comments","events_url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/35/events","html_url":"https://github.com/bramstein/fontfaceobserver/issues/35","id":108369611,"number":35,"title":"Complete Font Failure on Safari","user":{"login":"dwighthouse","id":5015265,"avatar_url":"https://avatars.githubusercontent.com/u/5015265?v=3","gravatar_id":"","url":"https://api.github.com/users/dwighthouse","html_url":"https://github.com/dwighthouse","followers_url":"https://api.github.com/users/dwighthouse/followers","following_url":"https://api.github.com/users/dwighthouse/following{/other_user}","gists_url":"https://api.github.com/users/dwighthouse/gists{/gist_id}","starred_url":"https://api.github.com/users/dwighthouse/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dwighthouse/subscriptions","organizations_url":"https://api.github.com/users/dwighthouse/orgs","repos_url":"https://api.github.com/users/dwighthouse/repos","events_url":"https://api.github.com/users/dwighthouse/events{/privacy}","received_events_url":"https://api.github.com/users/dwighthouse/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-09-25T17:13:40Z","updated_at":"2015-09-26T14:14:49Z","closed_at":null,"body":"I'm redesigning my website for mach speed. One of the changes is to have readable text asap, hence your library and following Filament Group's style of switching custom fonts on globally once they are detected as parsed: https://www.filamentgroup.com/lab/font-events.html\r\n\r\nI have not yet implemented the server side rewrite to set the html class name fontsLoaded upon the detection of a cookie, I'm just at the point of showing the fallback and then jumping to the custom font when ready.\r\n\r\nOn Safari (OS X Yosemite 10.10.5, Safari Version 8.0.8), with empty cache or not, run as local or from a remote server, I'm getting full font failure in several distinct ways while using the fontfaceobserver library. I have also observed these effects on Safari for iOS (v9, I believe).\r\n\r\n## Behavior Types\r\nI enumerate the different kinds of weird behavior here first. Please note that in spite of all these behaviors, the Safari Inspector correctly reports style values, and a console log statement ensures that fontfaceobserver is actually running.\r\n\r\n* Font Disappears - The place where the custom font (or even the fallback font) should display is simply invisible; areas that show the custom font when hovered have their text cut off\r\n* Fallback Displayed - The place where the custom font should display (after having loaded) still shows the fallback font; areas that show the custom font when hovered have their text cut off\r\n* Correct Behavior - Fallback font is displayed, but quickly replaced with the custom font (as soon as it is detected as loaded by fontfaceobserver)\r\n* Immediate Custom Display - The custom font displays immediately, without showing the fallback font, even for a moment\r\n\r\n## Scenarios\r\nThere are several different ways of interacting with the loading of the browser and fonts.\r\n\r\n* When first loading the page, I have observed three types of behavior: Font Disappears, Fallback Displayed, and Correct Behavior.\r\n* When going up to the address bar, highlighting the url, and pressing enter, I always get Correct Behavior.\r\n* When reloading the page with keyboard shortcuts or the reload button in the address bar, I always get Fallback Displayed behavior.\r\n* In the Font Disappears and Fallback Displayed behavior situations, if I resize the page in any way, the correct custom font appears.\r\n* When the custom font is being displayed, if I leave for another website, returning via the back button results in Immediate Custom Display behavior.\r\n* In the Fallback Displayed behavior situation, if I leave for another website, returning via the back button results in Font Disappears behavior (usually).\r\n* In the Font Disappears behavior situation, if I leave for another website, returning via the back button results in Font Disappears behavior.\r\n* In the Font Disappears behavior situation, if I reload the page, I always get Fallback Displayed behavior.\r\n\r\nI've also seen one case where reloading caused a flash of the fallback font followed by the fonts disappearing. I've had other slight differences throughout my testing. Basically, few of the above are very consistent. I suspect some kind of race condition is going on in Safari.\r\n\r\n## My Code\r\nThis is the abbreviated code relevant to the problem. Note that I have already tried without the src: local hack, with and without using quotes around my font url references, and tried both font-weight normal and font-weight 300. The font family name should be unique here (doesn't match any font names on my system). I have also tried explicitly setting the non-loaded styles to a font-family of sans-serif.\r\n\r\n*CSS*\r\n```css\r\n@font-face {\r\n    font-family: 'comfortaa-thin-custom';\r\n    src: url(theme/fonts/comfortaa-thin.eot);\r\n    src: local('☺︎'),\r\n         url(theme/fonts/comfortaa-thin.eot?#iefix) format('embedded-opentype'),\r\n         url(theme/fonts/comfortaa-thin.woff2) format('woff2'),\r\n         url(theme/fonts/comfortaa-thin.woff) format('woff'),\r\n         url(theme/fonts/comfortaa-thin.ttf) format('truetype'),\r\n         url(theme/fonts/comfortaa-thin.svg#comfortaathin) format('svg');\r\n    font-weight: 300;\r\n    font-style: normal;\r\n}\r\n\r\nhtml, body {\r\n    background: #ddd;\r\n    font-family: sans-serif;\r\n    color: #777;\r\n}\r\n\r\n.fontsLoaded .mainTitle, .fontsLoaded .sectionTitle, .fontsLoaded .imageText {\r\n    font-family: 'comfortaa-thin-custom', sans-serif;\r\n}\r\n\r\n.mainTitle, .sectionTitle, .imageText {\r\n    font-weight: 300;\r\n}\r\n```\r\n\r\n*Javascript*\r\n```javascript\r\n(function(w) {\r\n    (new w.FontFaceObserver('comfortaa-thin-custom')).check(null, 5000).then(function () {\r\n        w.document.documentElement.className += \" fontsLoaded\";\r\n        console.log('set font');\r\n    }, function () {});\r\n}(this));\r\n```\r\n\r\nI know this is somehow related to fontfaceobserver, because I tried replacing the fontfaceobserver activator code above with the following code, and got the expected behavior:\r\n\r\n```javascript\r\nsetTimeout(function() {\r\n    w.document.documentElement.className += \" fontsLoaded\";\r\n}, 200);\r\n```\r\n\r\nIn the above, it doesn't matter how short or long the timeout delay is, I still get the correct behavior (eventually), albeit with the flash of invisible text due to the time to load/parse the font. Also, when arriving at the page using the back button it loads the font immediately, probably not actually reloading the page, but from a cache of the existing page's contents.\r\n\r\nSetting the styles to use the custom font in the CSS immediately (without JS), I get the standard flash of invisible text until the font is loaded.\r\n\r\n## Examples\r\nHere is a version of my website that exhibits this behavior: http://exp.dwighthouse.com/hex/\r\nHere is a video of the problem: http://exp.dwighthouse.com/FontFailureSafari/FontLoadFailureOnSafari.mov"},"comment":{"url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/comments/143448820","html_url":"https://github.com/bramstein/fontfaceobserver/issues/35#issuecomment-143448820","issue_url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/35","id":143448820,"user":{"login":"bramstein","id":114871,"avatar_url":"https://avatars.githubusercontent.com/u/114871?v=3","gravatar_id":"","url":"https://api.github.com/users/bramstein","html_url":"https://github.com/bramstein","followers_url":"https://api.github.com/users/bramstein/followers","following_url":"https://api.github.com/users/bramstein/following{/other_user}","gists_url":"https://api.github.com/users/bramstein/gists{/gist_id}","starred_url":"https://api.github.com/users/bramstein/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bramstein/subscriptions","organizations_url":"https://api.github.com/users/bramstein/orgs","repos_url":"https://api.github.com/users/bramstein/repos","events_url":"https://api.github.com/users/bramstein/events{/privacy}","received_events_url":"https://api.github.com/users/bramstein/received_events","type":"User","site_admin":false},"created_at":"2015-09-26T14:14:49Z","updated_at":"2015-09-26T14:14:49Z","body":"Thanks for writing this very detailed post. I've experienced similar issues on Safari 8 (though not on Safari 7). Having steps to reproduce this issue is great! I'll try to find some time to look into this early next week. Last time I looked at it, I thought Safari was doing some pre-rendering using a cached version of the site, but I could be wrong about that."}}