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:
- Download your desired font family
- Extract the files to your computer from the .zip file.
- Find the standard font in the family (e.g. Arial-Regular.ttf)
- Go to Design Your Site > Theme Library
- Click on the ellipses (⋮) next to the Build button your Published Theme
- Click Edit Code
- Expand the folder called Assets
- Click Add New Asset and upload your font file(s)
- Go to the Styles folder
- Import the font through the _overrides.scss file
Example:
@font-face {
font-family: Arial-Regular;
src: url({{ 'Arial-Regular.ttf' | theme_asset_url }});
}
- Open the manifest.json file
- 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"
}
- Save manifest.json
- Go to **Design Your Site > Site Builder > Theme Settings** tab
- **Change fonts** to your custom font
- **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.