With the Growtheme you are able to choose custom Google Fonts for your Headlines and Paragraphs.

You can choose different fonts within the Typography Section of the WordPress Customizer.

Tip

We choosed with great care the best Google Fonts for both Headlines and Paragraphs. That’s why you may not find a specific Font Option within the Dropdown Fields. If you really think that your favorite font is missing from the options, send us a short email and we will explain you how to use it anyway.

You have the following Options:


Headline Fonts

You have a great selection of Google Fonts for your Headlines available. Simply choose a Font Family from the Dropdown Menu and select one of the available Font Weights for the Font you have chosen.


Paragraph Fonts

The same is true for your Paragraphs. The Font Selection differs a bit from the Headline Fonts, as not every Font is suitable for large amounts of text.


Advanced Options

We have put a great amount of effort into selecting optimal sizes for the default paragraph and headline styles. But if you like to edit the font size of a particular element on your page, you are free to do so by enabling the “Advanced Options”.


Adobe Typekit Integration

Adobe Typekit is a paid webservice that allows you to use not commonly and freely available fonts. Usually font licenses are only given for an individual project and can be pretty expensive, Adobe Typekit solves this problem by offering popular premium fonts on a monthly subscription.

So if you like to use a different font than the freely available fonts from Google Fonts, you can integrate the Growtheme with Adobe Typekit.

All you have to do is login to your Adobe Typekit Account (or create a new Account if you dont’ have one yet).

Next you have to choose some fonts for your Blog. Just click on one of the fonts you like and add it to a new or existing kit.

Once you have added one or two fonts you would like to use, select the Kit you want to use on your Blog from the Kit Dropdown Menu

A popup will open showing you again your font selection. Within the Popup click on “Kit Settings”

Within the Kit Settings you have to add your Blog Domain to the “Domains” Field. This simply defines which Domains are allowed to use the fonts within your Kit. As Typekit costs depending on the amount of Pageviews you get, you should make sure that only your own domain is allowed here.

Once you saved your Kit Settings, you can click on “Embed Code”

Select the Default Code and Copy it to your Clipboard.

Than go to the WordPress Customizer within your WordPress Admin Panel, select the Typography Section, enable Show Advanced Options and scroll down to the field Enable Typekit Integration. Once you activate the Option, you can paste the Embed Code into the Typekit Embed Code Input Field

Now you can scroll up again to the Headline and Paragraph Font Dropdown Fields and select one of your Typekit Fonts.

Tip

It’s best to only include Fonts you will really use into your Kit, as every Font you add will slow down the loading time of your Blog in general. Remove Fonts you don’t use from your Typekit Kit. A general recommendation is to use just one Typekit Font for your Headlines and a standard “Web Safe” Font for your Paragraphs.


Adding more Google Fonts to the Customizer

This is an advanced functionality and not recommended for most users. But if you really like to use a specific Google Font thats not currently available and Typekit is no option for you, than you can follow this guide.

First of all you have to download, install and activate a Growtheme Childtheme.

Next you have to connect to your webserver via FTP and modify the functions.php file within the growtheme-child folder

.

Within the example childtheme, you will find a function called growtheme_child_custom_google_fonts.

This function will allow you to filter the Growtheme Google Fonts Options. The function passes the parameter $fonts, which are the already by default available font options. If you check the functions.php file you will see that it adds two filters at the very end of it:

The filters are called:

  • growbox_fonts_heading

  • growbox_fonts_base

These two filters are responsible for the Google Fonts Options within the Growtheme.

As an example the function is already adding the “Quicksand” Google Font within the function:

This image highlights the part you would have to customize depending on the Google Font you woud like to add:

You can get this information simply by choosing the Google Font you would like to add on the Google Fonts Website:

Than clicking on the black bar at the bottom of your screen to open the options popup:

In the popup you will see both the font name and fontfamily that you will have to copy and paste between the single quotation marks in the function:

Please note that you will have to add the name of the font twice and that you enter it exactly like in the google popup.

If you click on “Customize” you will see the available font weights

You have to remove the weights that are not available by adding a double forward slash // in front of the option or respectively add options by removing the double forward slash //

Once you are finished you can simply save the file and select the new fonts within the Customizer.

If you wan’t to add more fonts, you can do so by copying the whole block from line 7 to 31 and pasting it right below within the same function.