Apply custom fonts

Our themes come with a large selection of web-safe fonts by default, which are supported across all major browsers and operating systems. Use custom fonts to align a theme with your company brand or simply to make it more visually engaging for your visitors.

Google Fonts and custom webfonts are two popular approaches for adding custom fonts to your Help Center. Some of our themes include Google Fonts theme options by default, but this guide covers how to add your own custom fonts and optionally extend your theme’s settings to make them configurable in the future.

Google Fonts

The following steps allow you to take advantage of the large range of custom fonts offered by Google.

  1. Navigate to in your browser to access the font library.

    Font directory

    The Google Fonts directory

    If you know the type of font that you’re interested in, use the Categories filter to reduce the number of options presented.

  2. Select the desired font family.

    Font family

  3. Select the font style(s) required for your Help Center.

    Font styles

  4. Repeat the steps above for other font families, if required. Once the required font families and styles have been selected, click on Embed in the right-hand sidebar.

    Embed fonts

  5. Copy the embed <link> into your document_head.hbs template.
  6. Use the provided CSS rules to use your new font in CSS declarations:

    .my-element {
      font-family: 'Inter', sans-serif;

    Alternatively, if you wish to use your new custom font in headings or body text, you can update your theme’s manifest.json file as described at the bottom of this page.

Custom Webfonts

The following steps allow you to use your favorite custom webfont in your Help Center.

  1. Find fonts using either a free font distributor like Font Squirrel or a paid font distributor like
  2. Download and unzip the font package to access the TTF (True Type Fonts) or OTF (Open Type Fonts) files.
  3. Generate a webfont kit by uploading the font files to the Fontsquirrel Webfont Generator.
  4. Download and unzip the webfont kit to the access the webfont files (for example, .ttf, .woff, .woff2).
  5. Upload the webfont files from your kit to your theme’s assets folder.
  6. Update your stylesheet (Sass or style.css file) to include the following “bulletproof @font-face syntax”:

     @font-face {
       font-family: 'Webfont';
       src: url('$assets-webfont-eot');
       src: url('$assets-webfont-eot?#iefix') format('embedded-opentype'),
              url('$assets-webfont-woff2') format('woff2'),
              url('$assets-webfont-woff') format('woff'),
              url('$assets-webfont-ttf') format('truetype'),
              url('$assets-webfont-svg#webfont') format('svg');
       font-weight: normal;
       font-style: normal;

    Note the variables that reference webfont files within your theme’s assets directory and the font name which will be unique to your chosen font.

  7. Use your new font in CSS declarations:

    .my-element {
      font-family: 'Webfont', sans-serif;

Updating theme settings

As a final (optional) step to either approach above, you can add your new font to your theme’s Settings Panel by updating the manifest.json file.

The easiest option is to add your font to the existing heading (heading_font) and/or body text (text_font) theme settings. For example, the following snippet adds the new font as an option in the Heading Font dropdown and sets it as the default heading font:

  "identifier": "heading_font",
  "type": "list",
  "description": "text_font_description",
  "label": "text_font_label",
  "value": "'Webfont', sans-serif",
  "options": [
      "label": "My Webfont",
      "value": "'Webfont', sans-serif"

Questions or feedback about this guide? Let us know