{"_id":"57760a1c260c8a0e00a98c43","category":{"_id":"560b13cbafa0990d00979545","project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","pages":["560b13f987b71d0d000d3bf6","560b394aaf40a70d003df31e","560b39669c7be70d00100bef","560b397d4a1f990d00dc7338","560b3991c341310d00de29de","560b39ae4a1f990d00dc733a","562ffd364445ae1900383e84","5642a810cc9d8e0d00adda69","5660daef89e82f0d008f6823","56a1e0b42255370d00ad5e9c"],"__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-29T22:42:19.181Z","from_sync":false,"order":13,"slug":"css-javascript-design-resources","title":"CSS and Design Assets"},"parentDoc":null,"user":"55a6caa022cfa321008e01d6","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"project":"55a6e72e8cc73e0d00096635","__v":36,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-01T06:13:48.607Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":7,"body":"[block:html]\n{\n  \"html\": \"Stencil's reference Cornerstone theme is built using Google Fonts. However, you have the option of incorporating non-Google fonts into the themes you develop. This page presents a workflow for a sample scenario of applying a custom font to a store's logo. It includes the following sections:<br>\\n\\n<ul>\\n <li><a href=\\\"#Get\\\">Stage the Fonts</a></li>\\n <li><a href=\\\"#HTMLHead\\\">Reference Fonts in Templates' &lt;head&gt;</a></li>\\n <li><a href=\\\"#Video\\\">Video Demo</a></li>\\n <li><a href=\\\"#CSS\\\">Update the CSS</a></li>\\n</ul>\\n\\n<!-- Cq remove restriction below? Brandy finds we actually *can* expose custom fonts in Theme Editor, if we include `\\\"force_reload\\\": true,` in the appropriate `schema.json` element. -->\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Theme Editor Restriction\",\n  \"body\": \"On the current Stencil framework, custom fonts that you incorporate using this process will *not* be available for selection in Theme Editor.\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<h2> <A NAME=\\\"Get\\\"></a>Stage the Fonts</h2>\\n\\nFirst, acquire your custom fonts. In this logo scenario, we'll assume the single (nonexistent) font <span class=\\\"inline-code\\\">MyFontFile.ttf</span>.<br>\\n<p></p>\\n\\nNext, <a href=\\\"/docs/webdav-static-assets\\\" target=\\\"_blank\\\">use WebDav to upload</a> each custom font. (Upload to WebDAV's default <span class=\\\"inline-code\\\">/content/</span> folder.)\\n\\n\\n<h2> <A NAME=\\\"HTMLHead\\\"></a>Reference Fonts in Templates' &lt;head&gt;</h2>\\n\\nNext, edit the appropriate template files' <span class=\\\"inline-code\\\">&lt;head&gt;</span> sections to reference your custom fonts.\\n\\nIn this logo example, you would edit the <span class=\\\"inline-code\\\">.../cornerstone/templates/layout/base.html</span> file's <span class=\\\"inline-code\\\">&lt;head&gt;</span> section to insert the following code, which references the custom font you just uploaded:<br>\\n<p></p>\\n\\n<pre>\\n&lt;style type=\\\"text/css\\\" media=\\\"screen, print\\\"&gt;\\n           :::at:::font-face {\\n               font-family: \\\"MyFont\\\";\\n               src: url(\\\"{{cdn 'webdav:MyFontFile.ttf'}}\\\");\\n           }\\n&lt;/style&gt;\\n</pre>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Prior to March 2017, Stencil's default theme installed with a different directory name. If you are following the above example with a legacy installation, the earlier path name would be:\\n<p></p><pre>.../stencil/templates/layout/base.html</pre>\\n\\nUse the same substitution for other examples on this page.\",\n  \"title\": \"Default Path Name Updated from \\\"stencil\\\" to \\\"cornerstone\\\"\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<h2> <a name=\\\"Video\\\"></a> Video Demo </h2>\\n\\nWatch a video demonstration of referencing custom fonts in your template files' <span class=\\\"inline-code\\\">&lt;head&gt;</span> sections: <br><p></p>\\n\\n<iframe src=\\\"https://www.youtube.com/embed/-w7Hbn_p_pw?ecver=2\\\" width=\\\"560\\\" height=\\\"315\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<h2> <A NAME=\\\"CSS\\\"></a>Update the CSS</h2>\\n\\nFinally, update the appropriate CSS to reference the same font. Here, you would edit the <NOBR><span class=\\\"inline-code\\\">.../cornerstone/assets/scss/layouts/header/_header.scss</span></nobr> file to include the two lines highlighted below:<br>\\n<p></p>\\n\\n<pre>\\n.header-logo-text {\\n   <strong>display: block;\\n   font-family: 'MyFont';</strong>\\n   [...]\\n}\\n</pre>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Notes\",\n  \"body\": \"* The [`cdn`](/docs/custom-handlebars-helpers#Custom-HB-cdn) custom Handlebars helper assumes WebDAV's default `/content/` folder, so there is no need to specify that folder.\\n* Fonts staged via WebDAV, as in the above example, will not show up in the local version of your theme.\"\n}\n[/block]","excerpt":"","slug":"using-custom-fonts","type":"basic","title":"Using Custom Fonts"}

Using Custom Fonts


[block:html] { "html": "Stencil's reference Cornerstone theme is built using Google Fonts. However, you have the option of incorporating non-Google fonts into the themes you develop. This page presents a workflow for a sample scenario of applying a custom font to a store's logo. It includes the following sections:<br>\n\n<ul>\n <li><a href=\"#Get\">Stage the Fonts</a></li>\n <li><a href=\"#HTMLHead\">Reference Fonts in Templates' &lt;head&gt;</a></li>\n <li><a href=\"#Video\">Video Demo</a></li>\n <li><a href=\"#CSS\">Update the CSS</a></li>\n</ul>\n\n<!-- Cq remove restriction below? Brandy finds we actually *can* expose custom fonts in Theme Editor, if we include `\"force_reload\": true,` in the appropriate `schema.json` element. -->" } [/block] [block:callout] { "type": "warning", "title": "Theme Editor Restriction", "body": "On the current Stencil framework, custom fonts that you incorporate using this process will *not* be available for selection in Theme Editor." } [/block] [block:html] { "html": "<h2> <A NAME=\"Get\"></a>Stage the Fonts</h2>\n\nFirst, acquire your custom fonts. In this logo scenario, we'll assume the single (nonexistent) font <span class=\"inline-code\">MyFontFile.ttf</span>.<br>\n<p></p>\n\nNext, <a href=\"/docs/webdav-static-assets\" target=\"_blank\">use WebDav to upload</a> each custom font. (Upload to WebDAV's default <span class=\"inline-code\">/content/</span> folder.)\n\n\n<h2> <A NAME=\"HTMLHead\"></a>Reference Fonts in Templates' &lt;head&gt;</h2>\n\nNext, edit the appropriate template files' <span class=\"inline-code\">&lt;head&gt;</span> sections to reference your custom fonts.\n\nIn this logo example, you would edit the <span class=\"inline-code\">.../cornerstone/templates/layout/base.html</span> file's <span class=\"inline-code\">&lt;head&gt;</span> section to insert the following code, which references the custom font you just uploaded:<br>\n<p></p>\n\n<pre>\n&lt;style type=\"text/css\" media=\"screen, print\"&gt;\n @font-face {\n font-family: \"MyFont\";\n src: url(\"{{cdn 'webdav:MyFontFile.ttf'}}\");\n }\n&lt;/style&gt;\n</pre>" } [/block] [block:callout] { "type": "info", "body": "Prior to March 2017, Stencil's default theme installed with a different directory name. If you are following the above example with a legacy installation, the earlier path name would be:\n<p></p><pre>.../stencil/templates/layout/base.html</pre>\n\nUse the same substitution for other examples on this page.", "title": "Default Path Name Updated from \"stencil\" to \"cornerstone\"" } [/block] [block:html] { "html": "<h2> <a name=\"Video\"></a> Video Demo </h2>\n\nWatch a video demonstration of referencing custom fonts in your template files' <span class=\"inline-code\">&lt;head&gt;</span> sections: <br><p></p>\n\n<iframe src=\"https://www.youtube.com/embed/-w7Hbn_p_pw?ecver=2\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen></iframe>" } [/block] [block:html] { "html": "<h2> <A NAME=\"CSS\"></a>Update the CSS</h2>\n\nFinally, update the appropriate CSS to reference the same font. Here, you would edit the <NOBR><span class=\"inline-code\">.../cornerstone/assets/scss/layouts/header/_header.scss</span></nobr> file to include the two lines highlighted below:<br>\n<p></p>\n\n<pre>\n.header-logo-text {\n <strong>display: block;\n font-family: 'MyFont';</strong>\n [...]\n}\n</pre>" } [/block] [block:callout] { "type": "info", "title": "Notes", "body": "* The [`cdn`](/docs/custom-handlebars-helpers#Custom-HB-cdn) custom Handlebars helper assumes WebDAV's default `/content/` folder, so there is no need to specify that folder.\n* Fonts staged via WebDAV, as in the above example, will not show up in the local version of your theme." } [/block]