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.
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.
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.
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.
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.
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.
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