{"action":"created","issue":{"url":"https://api.github.com/repos/Financial-Times/o-typography/issues/66","repository_url":"https://api.github.com/repos/Financial-Times/o-typography","labels_url":"https://api.github.com/repos/Financial-Times/o-typography/issues/66/labels{/name}","comments_url":"https://api.github.com/repos/Financial-Times/o-typography/issues/66/comments","events_url":"https://api.github.com/repos/Financial-Times/o-typography/issues/66/events","html_url":"https://github.com/Financial-Times/o-typography/pull/66","id":148121823,"number":66,"title":"Progressive font functionality","user":{"login":"ironsidevsquincy","id":74132,"avatar_url":"https://avatars.githubusercontent.com/u/74132?v=3","gravatar_id":"","url":"https://api.github.com/users/ironsidevsquincy","html_url":"https://github.com/ironsidevsquincy","followers_url":"https://api.github.com/users/ironsidevsquincy/followers","following_url":"https://api.github.com/users/ironsidevsquincy/following{/other_user}","gists_url":"https://api.github.com/users/ironsidevsquincy/gists{/gist_id}","starred_url":"https://api.github.com/users/ironsidevsquincy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ironsidevsquincy/subscriptions","organizations_url":"https://api.github.com/users/ironsidevsquincy/orgs","repos_url":"https://api.github.com/users/ironsidevsquincy/repos","events_url":"https://api.github.com/users/ironsidevsquincy/events{/privacy}","received_events_url":"https://api.github.com/users/ironsidevsquincy/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2016-04-13T16:58:30Z","updated_at":"2016-04-15T09:17:49Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/Financial-Times/o-typography/pulls/66","html_url":"https://github.com/Financial-Times/o-typography/pull/66","diff_url":"https://github.com/Financial-Times/o-typography/pull/66.diff","patch_url":"https://github.com/Financial-Times/o-typography/pull/66.patch"},"body":"A major annoyance with webfonts is the FOIT while the font is loading.\r\nThis adds functionality of depending on a certain class existing further up the dom (e.g. on the `html`) before setting the font on an element. Coupled with some sort of `FontFaceObserver` pattern (i.e. only add the class once the font is loaded), this will eliminate the FOIT\r\n\r\ne.g.\r\n\r\n```\r\n.foo {\r\n    @include oTypographySerifDisplay('s');\r\n}\r\n```\r\n\r\n=>\r\n\r\n```\r\n.foo {\r\n    font-family: serif;\r\n    font-weight: regular;\r\n    font-size: 16px;\r\n    line-height: 19px;\r\n}\r\n.loaded-serif-display-regular .foo {\r\n    font-family: FinancierDisplayWeb,serif;\r\n}\r\n```\r\n\r\n@keirog "},"comment":{"url":"https://api.github.com/repos/Financial-Times/o-typography/issues/comments/210377203","html_url":"https://github.com/Financial-Times/o-typography/pull/66#issuecomment-210377203","issue_url":"https://api.github.com/repos/Financial-Times/o-typography/issues/66","id":210377203,"user":{"login":"keirog","id":150157,"avatar_url":"https://avatars.githubusercontent.com/u/150157?v=3","gravatar_id":"","url":"https://api.github.com/users/keirog","html_url":"https://github.com/keirog","followers_url":"https://api.github.com/users/keirog/followers","following_url":"https://api.github.com/users/keirog/following{/other_user}","gists_url":"https://api.github.com/users/keirog/gists{/gist_id}","starred_url":"https://api.github.com/users/keirog/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/keirog/subscriptions","organizations_url":"https://api.github.com/users/keirog/orgs","repos_url":"https://api.github.com/users/keirog/repos","events_url":"https://api.github.com/users/keirog/events{/privacy}","received_events_url":"https://api.github.com/users/keirog/received_events","type":"User","site_admin":false},"created_at":"2016-04-15T09:17:49Z","updated_at":"2016-04-15T09:17:49Z","body":"👍 🚢 "}}