How to install Google Fonts in your theme (HookThemes only)

Note: this tutorial is for HookThemes WordPress themes only.

Customizing the fonts of your theme is a great way to give it a more personal style. We use the service Google Fonts to display web fonts in our themes and this tutorial will explain you how to change the default fonts for the ones of your choice. Google Fonts is a free service and is the most popular, it offers hundreds of fonts.

The current default fonts on our themes are Montserrat for the titles and Open Sans for all other texts.

1. Go to Theme options > Style Settings

2. Scroll down to the bottom of the page, find the Font settings module and check Display all options to customize your theme’s fonts.

3. The Font settings module will expand and show you all options. There are three fonts that can be changed: font of the header, font of the titles and the font of the text. There is description under each title that describe what will be affected.

4. For this step, we will need to open the Google Fonts website and select a font of our choice.

5. In this tutorial, we will chose Abril Fatface. In the profile page of the font, click on the Select This Font link at the top right of the page.

6. A panel will open at the bottom of the page with all information needed to change the font in your theme. Below the title Standard, you have the link of the font which starting with <link href=”. Below you have the CSS rule starting with font-family.

7. If you click on the Customize link, you will see all available weights. In the case of our example, Abril Fatface offers only one weight which is regular 400. Font weights use numbers as declaration, 300 is thin, 400 is regular and 700 is bold. Some fonts come with many more weights and some come with only one.

8. To apply the font to your theme, simple copy the information from the Google Fonts’ website into the Font settings module in your theme. In the Font link field, copy the font link, same for the CSS rule and Font weight. Be sure to only copy the number for the font weight.

9. Once you copied the three lines, click on Update in the top right corner of the page to apply the changes.

If you want to change the font for the titles and the text, repeat the same steps with different fonts.