Template Files
Templates Directory
Custom Templates
Customize Stencil Checkout
Handlebars Syntax and Helpers
Handlebars.js
Handlebars Helpers
Stencil Object Model
Stencil Objects

Using Custom Fonts

Custom Fonts Unavailable on Theme Editor

On the current Stencil framework, custom fonts that you incorporate using this process will not be available for selection in Theme Editor.

Stage the Fonts

First, acquire your custom fonts. In this logo scenario, we’ll assume the single (nonexistent) font MyFontFile.ttf. Next, use WebDav to upload each custom font. (Upload to WebDAV’s default /content/ folder.)


Reference Fonts in Templates’ <head>

Next, edit the appropriate template files’ <head> sections to reference your custom fonts. In this logo example, you would edit the /cornerstone/templates/layout/base.html file’s <head> section to insert the following code, which references the custom font you just uploaded:

<style type="text/css" media="screen, print">
           @font-face {
               font-family: "MyFont";
               src: url("{{cdn 'webdav:MyFontFile.ttf'}}");
           }
</style>

Video Demo

Watch a video demonstration of referencing custom fonts in your template files’ <head> sections:


Update the CSS

Finally, update the appropriate CSS to reference the same font. Here, you would edit the /cornerstone/assets/scss/layouts/header/_header.scss file to include the two lines below .header-logo-text:

.header-logo-text {
display: block;
   font-family: 'MyFont';
   [...]
}
Notes
  • The cdn custom Handlebars helper assumes WebDAV’s default /content/ folder, so there is no need to specify that folder.
  • Fonts staged via WebDAV, as in the above example, will not show up in the local version of your theme.