Menu

How to change the font of your Thinkific site

Note: This article is for anyone using a site theme with a version 2.0 or higher. If you're looking to change the font of your landing pages using Site Builder, please refer to this article. Not sure which theme your site is using?

In the Branding settings of our Theme versions 2.0 and higher, we do give you some options to change your site's header and content font like so:


NOTE: Before diving into this, please make sure you review Custom Themes so you are familiar with editing your Theme and understand the files you will need to access. This does require HTML/CSS. 


Changing To Another Web Safe Font

All devices come with their own list of installed fonts, which may not be the same across all devices. Web safe fonts are ones that appear across all operating systems, so you can rest assured that users will be able to see the font you've set. For a full list of web safe fonts, you can see here: https://www.cssfontstack.com/


Some common examples include:

  • Arial
  • Futura
  • Georgia
  • Verdana
  • Palantino
  • Garamond
  • Trebuchet
  • Impact


Once you are in your Theme's CSS style file (again, check Custom Themes to see what files are best) you can change the font-family throughout the style files or assign it like so:


html, body {
    font-family: 'INSERT FONT HERE';
}


This would change all of the fonts in the Theme's html & body section to the font-family you've assigned once you've properly saved your Theme (File > Save). If it's still not showing up on your site, there may be other styles that are overriding your changes. Make sure you're as specific as possible with which parts of the HTML you are trying to change, and if necessary you can add !important to the end of your font-family to force it through.



Import a Google Font

If you'd like to use something other than a web safe font, Google Fonts offers a lot of free options that you can import into your site. Once you have selected the font you'd like to use, you can choose the "@IMPORT" option to to get the code. 


For example, here's the import code for the Roboto font:


@import url('https://fonts.googleapis.com/css?family=Roboto');


For example, in my 'theme_wide_css' file I have imported Roboto and then assigned it to my site landing page banner title like so:



Upload a Custom Font 

If you've purchased a font online, or you have access to a font that isn't web safe or available on Google Fonts, you can upload the font directly to your Thinkific Site using our Assets feature. Here's how. Again, once you've imported it you can assign the new font to your HTML element. 



If you didn't find what you were looking for in this article, feel free to leave your suggestions on how we could improve this article below!

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.