{"id":"555627c4ea5e120d001884fb","name":"Flite Help Center","subdomain":"helpflite","versions":[{"_id":"555627c4ea5e120d001884fe","releaseDate":"2015-05-15T17:07:16.918Z","is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"}],"doc_slug":"","current_version":{"version_clean":"1.0.0","version":"1.0"},"oauth":{"enabled":false},"api":{"name":"","url":"","contenttype":"form","auth":"","explorer":true,"jwt":false,"authextra":[],"headers":[],"object_definitions":[]},"apiAlt":[],"plan_details":{"name":"Developer Hub","is_active":true,"cost":59,"versions":10000,"custom_domain":true,"custom_pages":true,"whitelabel":false,"errors":false,"password":true,"landing_page":true,"themebuilder":true,"stylesheet":true,"javascript":false,"html":true,"extra_html":false,"admins":true,"apps":true},"apps":{"enabled":false},"intercom":"","intercom_secure_emailonly":false,"flags":{"allow_hub2":false,"hub2":false,"migrationRun":false,"oauth":false,"swagger":false,"correctnewlines":false,"speedyRender":false,"ssl":false},"asset_base_url":""}

{"__v":6,"_id":"567b35067c40060d0056041d","category":{"__v":34,"_id":"555627c5ea5e120d001884ff","pages":["555627c6ea5e120d00188501","55562fbdea5e120d00188526","5556368b150ba30d00f4e0b7","5556590e26e9bc0d0044eb61","55567be0150ba30d00f4e248","55567bf026e9bc0d0044ec55","55567c08150ba30d00f4e24a","55567c14150ba30d00f4e24c","55567c4426e9bc0d0044ec59","55567c501026001900d72abc","55567c5926e9bc0d0044ec5d","55567c9a1026001900d72abf","55567cd9150ba30d00f4e24f","55567ce4150ba30d00f4e251","55567ced26e9bc0d0044ec61","555698d62f6b480d0034d9a4","55e0c386dc6b2e170074f2e3","55e0c5e15087cb1900986c16","55e0f99926f51b0d009b1744","567b35067c40060d0056041d","567b3531ee052b1700dbd9da","56846a5a65976e0d00001c57","5684783bc11c7e0d00aaff71","56847cb55a66610d006eabbd","56848a0cf72e9e0d00e098e5","568ccdf38602880d001ce230","569431fcd8c04d1700e5ae05","569ebe1ad233620d007055fb","569edd718f6d4b0d00f13b91","56aa5c3d13a69a0d00a77a09","56aa6eda4d38401900199f7a","56c7a7d5f9aa3b0d00c8457b","56d0ab1440d36e1d00bc143b","56ec9c5a493ce620008ea4c8"],"project":"555627c4ea5e120d001884fb","version":"555627c4ea5e120d001884fe","reference":false,"createdAt":"2015-05-15T17:07:17.512Z","from_sync":false,"order":0,"slug":"design","title":"Design Studio"},"project":"555627c4ea5e120d001884fb","user":"55562799ea5e120d001884f8","version":{"__v":10,"_id":"555627c4ea5e120d001884fe","project":"555627c4ea5e120d001884fb","hasDoc":true,"hasReference":true,"createdAt":"2015-05-15T17:07:16.918Z","releaseDate":"2015-05-15T17:07:16.918Z","categories":["555627c5ea5e120d001884ff","55562a5526e9bc0d0044ea47","555653821026001900d72a3c","5556685c1026001900d72a85","5556687626e9bc0d0044ec04","555668821026001900d72a87","55566892150ba30d00f4e206","555668b826e9bc0d0044ec05","55e0fb6026f51b0d009b1746","567b3b3017368a0d009a6e54"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"createdAt":"2015-12-23T23:57:58.350Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":15,"body":"In addition to using Flite’s standard font stack, the Text component and other components can also use a web font from [Google](http://google.com/fonts) and Monotype. Besides the ones included, you can select *Custom* to use fonts from Google’s catalog. Once you have found the font from Google Fonts you wish to use, click the *Add to Collection* button on that page. This will create a collection at the bottom of the page. Be sure that you only have one font in your collection, then click the Use button. Google will provide you with an HTML tag, but you only need the URL within that tag. Parse out this URL and paste it into the *Font URL* field.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Monotype Fonts\"\n}\n[/block]\n## Overview\nWe've partnered with Monotype to expand our font offerings. There are two options to use a custom font. Your first option is by choosing one of the 14 available fonts in the Monotype drop down as seen in the first GIF below. Upon selection, the ad will update instantly for a quick preview. On publish, the selected font will remain. Your second option is by taking a self hosted kit and using the custom font uploader as seen in the second GIF below.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/3UrIPkDbQOeLnE8OSj4T\",\n        \"fonts_list.gif\",\n        \"607\",\n        \"581\",\n        \"#4aa0e7\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nMonotype fonts are available in studio where all other webfonts are present. Some of which include:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/u6IsE0fTNaoMcECkWeTc\",\n        \"Screen Shot 2015-12-30 at 3.46.59 PM.png\",\n        \"1342\",\n        \"158\",\n        \"#5c96bc\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n## Custom Font Uploader\nThe uploader allows you to upload a custom font for use within the Flite platform. Once a custom font has been uploaded, it will appear in your fonts drop down. The uploaded font will only be available in the ad where the upload occurred. With your self hosted kit, simply drag and drop on the designated area or browse and select your kit via the browse button. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/bLaGSvysQrKxFzrWZGss\",\n        \"uploader.gif\",\n        \"1004\",\n        \"579\",\n        \"#3b5570\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nThe uploader requires a *self hosted kit* which you can obtain from one of the following resources: \n  * [Fonts.com](http://www.fonts.com)\n  * [Linotype.com](http://www.linotype.com)\n  * [FontShop.com](https://www.fontshop.com)\n  * [MyFonts.com](http://www.myfonts.com) \n\nBefore using your self hosting kit, please make sure to review the terms of service. For more information, please [contact your account manager](mailto:accountmanagement:::at:::flite.com).","excerpt":"","slug":"design-studio-using-web-fonts","type":"basic","title":"Using Web Fonts"}

Using Web Fonts

In addition to using Flite’s standard font stack, the Text component and other components can also use a web font from [Google](http://google.com/fonts) and Monotype. Besides the ones included, you can select *Custom* to use fonts from Google’s catalog. Once you have found the font from Google Fonts you wish to use, click the *Add to Collection* button on that page. This will create a collection at the bottom of the page. Be sure that you only have one font in your collection, then click the Use button. Google will provide you with an HTML tag, but you only need the URL within that tag. Parse out this URL and paste it into the *Font URL* field. [block:api-header] { "type": "basic", "title": "Monotype Fonts" } [/block] ## Overview We've partnered with Monotype to expand our font offerings. There are two options to use a custom font. Your first option is by choosing one of the 14 available fonts in the Monotype drop down as seen in the first GIF below. Upon selection, the ad will update instantly for a quick preview. On publish, the selected font will remain. Your second option is by taking a self hosted kit and using the custom font uploader as seen in the second GIF below. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/3UrIPkDbQOeLnE8OSj4T", "fonts_list.gif", "607", "581", "#4aa0e7", "" ] } ] } [/block] Monotype fonts are available in studio where all other webfonts are present. Some of which include: [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/u6IsE0fTNaoMcECkWeTc", "Screen Shot 2015-12-30 at 3.46.59 PM.png", "1342", "158", "#5c96bc", "" ] } ] } [/block] ## Custom Font Uploader The uploader allows you to upload a custom font for use within the Flite platform. Once a custom font has been uploaded, it will appear in your fonts drop down. The uploaded font will only be available in the ad where the upload occurred. With your self hosted kit, simply drag and drop on the designated area or browse and select your kit via the browse button. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/bLaGSvysQrKxFzrWZGss", "uploader.gif", "1004", "579", "#3b5570", "" ] } ] } [/block] The uploader requires a *self hosted kit* which you can obtain from one of the following resources: * [Fonts.com](http://www.fonts.com) * [Linotype.com](http://www.linotype.com) * [FontShop.com](https://www.fontshop.com) * [MyFonts.com](http://www.myfonts.com) Before using your self hosting kit, please make sure to review the terms of service. For more information, please [contact your account manager](mailto:accountmanagement@flite.com).