{"action":"created","issue":{"url":"https://api.github.com/repos/tangrams/tangram/issues/326","repository_url":"https://api.github.com/repos/tangrams/tangram","labels_url":"https://api.github.com/repos/tangrams/tangram/issues/326/labels{/name}","comments_url":"https://api.github.com/repos/tangrams/tangram/issues/326/comments","events_url":"https://api.github.com/repos/tangrams/tangram/issues/326/events","html_url":"https://github.com/tangrams/tangram/pull/326","id":159468070,"number":326,"title":"Add support for custom fonts","user":{"login":"bcamper","id":16733,"avatar_url":"https://avatars.githubusercontent.com/u/16733?v=3","gravatar_id":"","url":"https://api.github.com/users/bcamper","html_url":"https://github.com/bcamper","followers_url":"https://api.github.com/users/bcamper/followers","following_url":"https://api.github.com/users/bcamper/following{/other_user}","gists_url":"https://api.github.com/users/bcamper/gists{/gist_id}","starred_url":"https://api.github.com/users/bcamper/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bcamper/subscriptions","organizations_url":"https://api.github.com/users/bcamper/orgs","repos_url":"https://api.github.com/users/bcamper/repos","events_url":"https://api.github.com/users/bcamper/events{/privacy}","received_events_url":"https://api.github.com/users/bcamper/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/tangrams/tangram/labels/in%20progress","name":"in progress","color":"ededed"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/tangrams/tangram/milestones/10","html_url":"https://github.com/tangrams/tangram/milestones/v0.8.0","labels_url":"https://api.github.com/repos/tangrams/tangram/milestones/10/labels","id":1696197,"number":10,"title":"v0.8.0","description":null,"creator":{"login":"bcamper","id":16733,"avatar_url":"https://avatars.githubusercontent.com/u/16733?v=3","gravatar_id":"","url":"https://api.github.com/users/bcamper","html_url":"https://github.com/bcamper","followers_url":"https://api.github.com/users/bcamper/followers","following_url":"https://api.github.com/users/bcamper/following{/other_user}","gists_url":"https://api.github.com/users/bcamper/gists{/gist_id}","starred_url":"https://api.github.com/users/bcamper/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bcamper/subscriptions","organizations_url":"https://api.github.com/users/bcamper/orgs","repos_url":"https://api.github.com/users/bcamper/repos","events_url":"https://api.github.com/users/bcamper/events{/privacy}","received_events_url":"https://api.github.com/users/bcamper/received_events","type":"User","site_admin":false},"open_issues":6,"closed_issues":7,"state":"open","created_at":"2016-04-10T17:52:31Z","updated_at":"2016-06-09T17:55:42Z","due_on":null,"closed_at":null},"comments":1,"created_at":"2016-06-09T17:48:09Z","updated_at":"2016-06-09T18:48:43Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/tangrams/tangram/pulls/326","html_url":"https://github.com/tangrams/tangram/pull/326","diff_url":"https://github.com/tangrams/tangram/pull/326.diff","patch_url":"https://github.com/tangrams/tangram/pull/326.patch"},"body":"Adds supports for custom web fonts, either loaded directly by Tangram, or via an external CSS stylesheet.\r\n\r\n- The scene file has a new optional, top-level `fonts` block, which is a mapping of **font definitions**.\r\n- The *key* of each font definition is the font **family** name, and the *value* is one or more **font face definitions** (a single object, or an array of objects).\r\n- Each **font face definition** is an object with the following possible parameters:\r\n  - `weight`: defaults to `normal`, may also be `bold` or a numeric font weight, e.g. `500`\r\n  - `style`: defaults to `normal`, may also be `italic`\r\n  - `url`: the URL to load the font from. For maximum browser compatibility, fonts should be either `ttf`, `otf`, or `woff` (`woff2` is [currently supported](http://caniuse.com/#search=woff2) in Chrome and Firefox but not other major browsers). As with other scene resources, `url` is relative to the scene file.\r\n- All font face parameters are *optional*.\r\n  - If a `url` is specified, the font is loaded by injecting one or more CSS `@font-face` rules into the document head.\r\n  - If no `url` is specified, Tangram JS will assume that the font has already been loaded via external CSS (e.g. this could be used to load fonts alongside Tangram via Google Fonts). Tangram JS still needs to know that these custom fonts will be used, so that it can wait to render text until they have loaded. If no additional parameters such as `weight` are required, the entire object be empty (`{}`), or even just `true`; Tangram JS will accept any truthy value as an indicator that the font will loaded. This case would be a no-op in the case of Tangram ES, where the font manager should find any fonts bundled with the map/app, without relying on any additional information from the scene file.\r\n\r\nExample of a font with a single face definition:\r\n```\r\nfonts:\r\n    Montserrat:\r\n        url: https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff\r\n```\r\n\r\nExample of a font with multiple face definitions:\r\n```\r\nfonts:\r\n    Open Sans:\r\n        - weight: 300\r\n          url: fonts/open sans-300normal.ttf\r\n        - weight: 300\r\n          style: italic\r\n          url: fonts/open sans-300italic.ttf\r\n        - weight: 400\r\n          url: fonts/open sans-400normal.ttf\r\n        - weight: 400\r\n          style: italic\r\n          url: fonts/open sans-400italic.ttf\r\n        - weight: 600\r\n          url: fonts/open sans-600normal.ttf\r\n        - weight: 600\r\n          style: italic\r\n          url: fonts/open sans-600italic.ttf\r\n        - weight: 700\r\n          url: fonts/open sans-700normal.ttf\r\n        - weight: 700\r\n          style: italic\r\n          url: fonts/open sans-700italic.ttf\r\n        - weight: 800\r\n          url: fonts/open sans-800normal.ttf\r\n        - weight: 800\r\n          style: italic\r\n          url: fonts/open sans-800italic.ttf\r\n```\r\n\r\nExample of a custom font loaded via external CSS:\r\n```\r\nfonts:\r\n    Poiret One: true # loaded via external CSS\r\n```\r\n\r\nAnd in the document:\r\n`<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>`\r\n\r\n\r\n\r\n\r\n\r\n\r\nAny fonts specified in the `fonts` block can then be referenced in the `font` block when rendering with `text` or `points`-based styles. Tangram JS will block text rendering while custom fonts load, using the [`FontFaceObserver`](https://github.com/bramstein/fontfaceobserver) polyfill for [CSS Font Loading Module Level 3 events](https://drafts.csswg.org/css-font-loading/). \r\n\r\nThis PR replaces the earlier implementation from #284.\r\n"},"comment":{"url":"https://api.github.com/repos/tangrams/tangram/issues/comments/224990288","html_url":"https://github.com/tangrams/tangram/pull/326#issuecomment-224990288","issue_url":"https://api.github.com/repos/tangrams/tangram/issues/326","id":224990288,"user":{"login":"bcamper","id":16733,"avatar_url":"https://avatars.githubusercontent.com/u/16733?v=3","gravatar_id":"","url":"https://api.github.com/users/bcamper","html_url":"https://github.com/bcamper","followers_url":"https://api.github.com/users/bcamper/followers","following_url":"https://api.github.com/users/bcamper/following{/other_user}","gists_url":"https://api.github.com/users/bcamper/gists{/gist_id}","starred_url":"https://api.github.com/users/bcamper/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bcamper/subscriptions","organizations_url":"https://api.github.com/users/bcamper/orgs","repos_url":"https://api.github.com/users/bcamper/repos","events_url":"https://api.github.com/users/bcamper/events{/privacy}","received_events_url":"https://api.github.com/users/bcamper/received_events","type":"User","site_admin":false},"created_at":"2016-06-09T18:48:43Z","updated_at":"2016-06-09T18:48:43Z","body":"Discussing with @blair1618, rather than having any truthy value used to indicate externally loaded fonts, perhaps we should only accept a single, more explicit value, such as the string 'external', 'CSS', or 'DOM':\r\n\r\n```\r\nfonts:\r\n    Poiret One: external # font will be loaded via external CSS\r\n```\r\n\r\nThis is more precise and hopefully would be less opaque and more self-documenting for scene authors (especially those from less technical backgrounds, for whom values like `{}`, `null` or `true/false` may not be as obvious here).\r\n"}}
{"actor":{"display_login":"bcamper"}}