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 Channels > Theme Library
5. Click on the ellipses (⋮) next to the Build button for 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 Channels > Website
15. Click the Default pages tab
16. Click Home page 
17. Click the Theme Settings tab
18. Click either Desktop typography or Mobile typography
19. Change fonts to your custom font
20. Save your changes

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