How to add custom fonts to your Thesis Theme

Loading Custom Fonts in Thesis

The Thesis Theme, as a default install, has a number of fonts available to use. However, sometimes you may want to use a font set, custom font set, that’s not installed as default.

It maybe that you want to use a custom font set for your headline, your post text or your menu. This quick thesis tutorial will show you how to add a custom font set to your install.

1) Goto Thesis -> Thesis Home

First step is to goto the Thesis->Thesis Home menu option from your WordPress dashboard.

Thesis Home Screen

Thesis Home Screen

2) Goto Site -> HTML Head

Once your at the Thesis Home page. At the top of the screen you will see the ‘Site’ drop down menu.

Click this for the drop down menu to activate. Then choose the HTML Head menu item.

The Site Menu

The Site Menu

3) Head Scripts cog item

When your on the HTML Head page, hover over the ‘Head Scripts’ block and you will see a cog item appear. Click this cog icon.

HTML Head Editor

HTML Head Editor

4) Enter your custom font

Once clicked an new text screen opens. This is where you need to paste the string needed to load your custom font.

Edit HTML Head

Edit HTML Head

For example, here is the script I added to load the font-awesome font set

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'>

5) Close and save

Finally, click the X in the top right corner to close the window; then click the Green ‘Save HTML Head’ button in the top right.

Save HTML Head

Save HTML Head

Now use the font

The font has now been added to the HTML Head and the theme. You can now start using in your Custom CSS by addressing individual selectors.

How do we add a font set so it can be chosen from the Thesis font and size menu

Under thesis->Skin Design, there is a menu icon titled  ‘Font & Size (Primary)’. If you click this you get a menu which allows you to set a Primary Font and Size for your site.

By default, this has just a default set of fonts to choose from. With this next example, you can add a custom font to your site, similar to the above example, with the addition of adding some extra code to allow you to select this from this menu list.

Font not there

Font not there

To start, we need to add the custom font, like before, to the HTML Head. For this example, we will be using then Great Vibes font.

Refer back to the above steps if you don’t remember how to add this. Add the following line to the HTML Head

<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>

This adds the Great Vibes font to the site. At this point, you can use it through the Custom CSS.

Once we have it loaded from the HTML Head, we need to add the font family to the list of fonts already in the Thesis Theme. To do this, we need to add a little code to the custom.php file.

If you’re unsure how to add code then check out this post on how to edit and add code to the custom.php.

The following is the code you need to add to the custom.php file


Once added, the Great Vibes font is can now be chosen from the font menu

Font available

Font available

About the author: I’m a Software Engineer by trade and for a while I have been spending my time creating Websites and Blogs with Wordpress. I recently started to use the Thesis Framework and found only a few tutorials and help. So, I started this site to document what I learn and to share with others. I’m also available to help on a one to one basis for those that would like to work with me.

{ ( 3 comments… add one ) }
  • Alaminteak June 13, 2018, 8:42 am

    Nice Info and Tutorial. Thank for sharing

    • sean June 13, 2018, 8:55 am

      Thank you

Leave a Comment