Using Google Fonts in Custom Themes

    Plan Availability
    Legacy Plans
    Platform

When creating custom themes you can use Google Fonts to create customized site pages that match your desired branding and styles. 

Alternatively, if you want to use your own, non-Google fonts, see here: Using Custom Fonts.

Using Google Fonts

If you are using a Google font, you don't need to download the file and can simply reference it in the manifest.json file.

  1. Go to Google Fonts here: https://fonts.google.com
  2. Locate your desired font and click on it to view details
  3. On your desired style, click Select this style
  4. Click Embed
  5. In the CSS view, you'll see the name of the font that you'll need to reference

Google Font Name

  1. Return to your Thinkific site
  2. Go to Design Your Site > Theme Library
  3. Click on the ellipses (⋮) next to the Build button your Published Theme
  4. Click Edit Code
  5. Open the manifest.json file
  6. Add the following to all instances of the list of available fonts as such:
{
"value": "Font-Name",
"label": "Font Name",
"group": "Sans-serif or serif"
}

Example:

{
"value": "Barlow-Regular",
"label": "Barlow",
"group": "Sans-serif"
}

Add font to manifest

  1. Save manifest.json
  2. Go to Design Your Site > Site Builder > Theme Settings tab
  3. Change fonts to your custom font
  4. Save your changes

NOTE: For help with custom fonts on Legacy or non-Site Builder themes, you can check out this article here.

For more on using Custom Themes, see Using Assets in Custom Themes.

Was this article helpful?
5 out of 7 found this helpful