Thrive Knowledge Base

How to Use Custom Fonts in the Theme Customizer

In your WordPress admin dashboard, go to “Appearance” and “Customize” to open the theme customizer with a live preview of your site.

In the “Fonts” section of the customizer, there are two buttons you can click, to start changing the fonts, one for the headings and titles and one for the body text on your site:

2014-06-26_1745

After clicking on a “Choose Font” button, a modal box with your font selection will appear:

2014-06-26_1747

1) Preview

This shows a small preview of what the selected font will look like. A full preview on your actual site will be displayed once you make a selection and click the “Save” button.

2) Font Sets

You can select “Show All Fonts” to list more than 600 fonts, available via Google Fonts. If you don’t have a specific font in mind yet, the sheer number of the available fonts here can be overwhelming. In this case, you can leave “Recommended Fonts Only” selected, which will display a shorter list of high-quality fonts selected by us.

3) Font Choice

Choose the font you want to use from this drop-down menu.

4) Font Styles

The number of selections available here will depend on the theme you selected. Some themes don’t have multiple styles, other themes have many different styles. You can select the font weight you want to display by default in the first column and the font weight you want to display for bolded text in the second column. Note that the bold style must be bolder than the regular style. In other words, you can’t set the regular weight to 700 and the bold weight to 500, it has to be the other way around.

5) Character Set

Some fonts come in multiple character sets (e.g. Cyrillic, Greek). Choose the character set you want to use, in this column.

6) Save

When you’ve made your selections, click the “Save” button. After a few seconds, the preview of your site will refresh and you’ll see the new fonts applied.

Further Options

Further options for your site’s fonts are set in the customizer as well. You can set your font size, headline weight and more. The text sizes are set in px, the line height value is set in em.

>