Using Custom Fonts in Custom Themes

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

Alternatively, if you want to use Google fonts, see here: Use Google Fonts.

Using Custom Fonts

Thinkific supports the following font file types: ttf, woff, woff2, and eot. To use a custom font on your site:

1. Download your desired font family
2. Extract the files to your computer from the .zip file.
3. Find the standard font in the family (e.g. Arial-Regular.ttf)
4. Go to Design Your Site > Theme Library
5. Click on the ellipses (⋮) next to the Build button your Published Theme
6. Click Edit Code
7. Expand the folder called Assets
8. Click Add New Asset and upload your font file(s)
9. Go to the Styles folder
10. Import the font through the _overrides.scss file

Example:

@font-face {
font-family: Arial-Regular;
src: url({{ 'Arial-Regular.ttf' | theme_asset_url }});
}

11. Open the manifest.json file
12. 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": "Arial-Regular",
"label": "Arial Regular",
"group": "Sans-serif"
}

13. Save manifest.json
14. Go to **Design Your Site > Site Builder > Theme Settings** tab
15. **Change fonts** to your custom font
16. **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.