Using Google Web Fonts in Your Theme

Introduction

The Theme General Options and Backgrounds options panel is where you can alter a number of settings that affect aspects of your theme that are not specifically isolated to individual blocks:

This tutorial looks specifically at the options available when you click the Theme General Options and Backgrounds > Google Fonts bar:  

Google Web Fonts is a directory that contains hundreds of free, open-source fonts that have been optimized for the web. ThemeStarta makes using Google Fonts in WordPress themes super easy. 

Making a Google Font Available

To add one or more Google Fonts to your theme:

1. Visit Google Fonts, browse the font families, and choose a font you would like to use.

2. Copy the name of the font you want to use. The font name is located in the lower left of the font preview pane. The image above shows that the font we want to select in this example is Lilita One.

3. Paste the name of the Google Font into ThemeStarta’s Google Font Field. The image below shows we have pasted the Lilita One font into the Google Font field.

4. Click  to apply the change in the ThemeStarta preview. Now, when you return to the Theme General Options and Backgrounds > Google Fonts options panel you will see that your new font has been made available for use in your theme:

The above image shows you that Lilita One is available for use in your theme and displays a preview of how the font looks.  

Using an Available Google Font

Once you’ve added a Google Font to your theme it will be available to use. To use it:

1. In ThemeStarta, navigate to the options panel for the text area where you would like to use the Google Font you have added, then click the  button. You will see a preview of the fonts that are available to you. This preview include default fonts as well as any Google Font you have previously made available to your theme.

Example font preview showing default fonts and the Google Font we just added:

2. Hover your cursor over the font you want to use (the font will turn red). Click on the font to select it. The preview window will close.

In the above image example, we have navigated to the Theme General Options and Backgrounds > Default Text and Heading Settings > Heading 1 Text setting, and selected the Google Font Lilita One from the font preview. As you can see, the selected Google Font is now displayed as the Heading 1 Default Font.

3. Click  to apply the change in the ThemeStarta preview. 

4. Click  to apply your changes to your live WordPress theme.   

Using Multiple Google Fonts

To make multiple Google Fonts available in your theme, at step 3 of the “Make Google Fonts Available” procedure above simply paste each Google Font name you want in the Google Font field separated by the | vertical dash sign.

Example adding of three separate Google Fonts:

Note: Displaying Google Fonts adds additional processing to the display of your theme. To ensure your theme performs at optimum speeds, it is recommended you should add no more than three separate Google Fonts to any one theme. We also recommend that you limit use of Google fonts to headings and use defaults fonts for your main content text.