To customise the fonts used on your website, start by opening up the Fonts tabs in the Customiser.
If you are using Thrive, Shine, Flourish or Bloom, you will see two tabs here; Font Systems (Old Setup) and Fonts (New Setup).
If you open up the Font Systems (Old Setup) tab you will see that you have the option to select a font system that we have created for you. Simply click on the font system you wish to use and the fonts in your theme will be updated.
If you open up the Fonts (New Setup) tab you will see that you have some different options. You can either choose your fonts from the pre-installed lists of fonts, or if you would prefer to use your own fonts from Google Fonts, you have the option to do this instead.
If you would like to use the fonts that come with the theme, simply select the your fonts of choice from the dropdown list. You can choose different fonts for your main headings, sub heading, paragraphs, and menus and buttons.
If you would prefer to use your own fonts, head over to the Google Fonts website.
When you find a font you would like to use, click on it and then click Select this style next to the style of font you would like to use.
Continue doing this until you have selected all the fonts you would like to use.
On the right-hand side of the screen you will now see the fonts have you have selected. If you click on the Embed tab at the top of this pop-out you will see the code that you need to embed your fonts on your website.
Firstly you need to copy the code in the top box (the one that starts <link).
You need to paste this into the Google Fonts Code field in the customise like this:
This will allow you to use these fonts on your website.
Then you assign these fonts to your certain elements on your website. You can assign your fonts to four different elements:
- Main heading font
- Sub heading font
- Paragraph font
- Buttons and menus font.
To assign these fonts you need to go back to the Google Fonts website. After the embed code, you will see a section called CSS rules to specify families and in this section, you will see some more code. These are the font-family declarations. You’ll notice that there is one for each font you have selected in Google Fonts.
You’ll need to copy each font-family declaration and post it into the relevant field in the customiser.
So let’s say for example you want to use the font Nunito for the main headings on your website. You would need to highlight and copy the font-family declaration for Roboto and then paste this into the Main heading font field in the customiser, like this:
Continue to repeat this process for each of the Google fonts you want to use.
You can use the same font for multiple elements. For example, you might want to use the same font for the main heading font and the subheading font. You’d just need to add the font-family declaration to both the Main heading font field and the Subheading font field.