For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Dev Portal
DocsAPI ReferenceLearnCommunityChangelog
DocsAPI ReferenceLearnCommunityChangelog
    • Overview
  • Learning Plans
    • Developer Foundations
    • Composable Developer
    • Stencil Developer
    • B2B Developer
  • Courses
        • Stencil Theme File Structure
        • Lab - Edit config.json File
        • Lab - Customize Components
        • Lab - Customize Layout and Pages
        • Lab - Customize Assets
        • Lab - Add a Custom Font Bundled with the Theme
        • Lab - Language File
        • Lab - Theme Editor Text Fields
        • Lab - Debugging Your Stencil Theme
      • Conclusion
    • Learning Changelog
Dev Portal
LogoLogo
On this page
  • Applying Custom Fonts
  • Google Fonts
  • Add a Custom Font Bundled with the Theme
  • Step 1: Add Font Files to the Theme
  • Step 1.2: Create Font Face Rules for Each Version on the Font in the New Directory
  • Step 1.3: Add the New Font to Available Schema
  • Step 1.4: Use Your New Font in the Theme
  • Add a Custom Font Hosted Outside the Theme
  • Custom Fonts
  • Step 2: Add Font Files to WebDAV
  • Step 2.1: Create Font-Face CSS Rules to Load Your Font
  • Step 2.2: Import Your New SCSS File
  • Step 2.3: Use Your New Font in the Theme
  • Step 3: Add a New Google Font Reference to config.json
CoursesStencil CoreModule 2: Customize the Stencil Theme

Lab - Add a Custom Font Bundled with the Theme

Was this page helpful?
Previous

Lab - Customize Assets

Next

Lab - Language File

Built with

Plan: Stencil Developer

 Lesson 9 of 16 · 30 min

In this lab, you will:

  • Add a custom font bundled with the theme
  • Add a custom font hosted outside the theme
  • Add a new Google font

Prerequisites

  • Previous labs have been completed
  • Stencil CLI installed
  • Base Cornerstone Theme downloaded and initialized

Applying Custom Fonts

There are two paths to take for using custom fonts:

  • Change to a new Google Font
  • Use a custom font

Google Fonts

Google Fonts is a collection of open source fonts available for use. The base Cornerstone theme uses Karla and Montserrat. Google Fonts come included in the Cornerstone theme. In config.json update each place you want the change with the name of the new Google Font.

Make sure it follows of the format Google_FontName_Weight.

If you are using a different theme, verify using Google Fonts.

Add a Custom Font Bundled with the Theme

Step 1: Add Font Files to the Theme

  1. Create a new directory in assets/fonts
    ex. /assets/fonts/Gotham
  2. Drag and drop the font files into the new directory

Gotham font files in the assets/fonts directory

Step 1.2: Create Font Face Rules for Each Version on the Font in the New Directory

  1. Open the main layout template file at templates/layout/base.html
  2. Within the <head> block, add a style block with @font-face rules for each version of the font in the new directory
<style type="text/css" media="screen,print">
    @font-face {
        font-family: "Gotham";
        src: url("{{cdn 'assets/fonts/Gotham/GothamMedium.woff'}}") format("woff");
        font-style: normal;
        font-weight: 400;
    }
    @font-face {
        font-family: "Gotham";
        src: url("{{cdn 'assets/fonts/Gotham/GothamBold.woff'}}") format("woff");
        font-style: normal;
        font-weight: 700;
    }
</style>
Note the use of the cdn helper to reference the asset file.

Step 1.3: Add the New Font to Available Schema

To make sure the new font is available in the fonts list when editing in Page Builder, add it in schema.json.

  1. Open the file schemaTranslations.json
  2. Add translated labels related to the new font
"i18n.Gotham": {
    "default": "Gotham"
  },
"i18n.GothamBold": {
    "default": "Gotham Bold"
  },
  1. Open the file schema.json
  2. Locate the “options” group for the “headings-font” setting
  3. Add the new font options to the array
{
  "type": "font",
  "label": "i18n.HeadingFontFamily",
  "id": "headings-font",
  "options": [
    {
      "group": "i18n.Gotham",
      "label": "i18n.Gotham",
      "value": "Gotham_400"
    },
    {
      "group": "i18n.Gotham",
      "label": "i18n.GothamBold",
      "value": "Gotham_700"
    },
    ...
  ]
}

Step 1.4: Use Your New Font in the Theme

  1. Open the config.json file in the top level of the theme directory
  2. Locate the “headings-font” setting
  3. Replace the original font family with your new font family name
    ex: "headings-font": "Gotham_700"
  4. View the new font on your storefront

Note that your new default value in config.json should match the “value” of one of the available font settings you added in schema.json.

Add a Custom Font Hosted Outside the Theme

Custom Fonts

Custom fonts can be used in any theme. To use a custom font, upload it to the stores /content/ folder in WebDav.

Config file for custom fonts

For more information on custom fonts, go to: Custom Fonts and Icons.

Step 2: Add Font Files to WebDAV

  1. Connect to WebDAV using these instructions: https://support.bigcommerce.com/s/article/File-Access-WebDAV
  2. Drag and drop the font files into the content directory

WebDAV content directory with font files

You cannot create new top-level directories in WebDAV, but you can create new subdirectories. If you receive a permissions error trying to create a subdirectory, try dragging a folder created on your desktop into the target directory in WebDAV

Step 2.1: Create Font-Face CSS Rules to Load Your Font

  1. Create a new scss file in the assets/scss/fonts directory
    Ex: assets/scss/fonts/_indigo.scss
  2. Create @font-face rules for each version of the font in the new directory
@font-face {
    font-family: "Indigo Regular";
    font-style: normal;
    font-weight: 400;
    src: url("https://mybigsandbox.com/content/Indigo/IndigoRegular.otf") format("truetype");
}
@font-face {
    font-family: "Indigo Outline";
    font-style: normal;
    font-weight: 400;
    src: url("https://mybigsandbox.com/content/Indigo/IndigoOutline.otf") format("truetype");
}

Referencing from the CDN

Any time a file is uploaded to the /content/ directory, it is best to reference it from the CDN. The steps in this lab reference the font from the store’s domain, but you can use the URL structure below to access the /content/ directory on the CDN:

https://cdn11.bigcommerce.com/s-&lt;STORE_HASH&gt;/content/

Step 2.2: Import Your New SCSS File

  1. Navigate to assets/scss/fonts directory
  2. Open the assets/scss/fonts/_fonts.scss file
  3. Add the following to the top of the file:
@import "indigo";

Step 2.3: Use Your New Font in the Theme

  1. Navigate to the config.json file in the top level of the theme directory
  2. Locate a key-value pair that sets a font family
    ex: "body-font": "Google_Karla_400"
  3. Replace the original font family with your new font family name
    ex: "body-font": "Indigo Regular"
  4. View the new font on your storefront

Step 3: Add a New Google Font Reference to config.json

  1. Navigate to the config.json file in the top level of the theme directory
  2. Locate a key-value pair that sets a font family
    ex: "headings-font": "Google_Montserrat_400"
  3. Update the value with the format "Google_Font+Name_FontWeight"
    ex: "headings-font": "Google_Lobster+Two_700"

When you create @font-face rules be sure to choose a font weight that is available on Google. If you choose a weight that is not available on Google, it won’t exist and it will default to the browser default font.

  1. View the new font on your storefront

Google font support is included in the base Cornerstone theme. Other marketplace themes may not come with this built-in.