To customise the fonts used on your website, start by opening up the Fonts tabs in the Customiser.
You can either choose from a selection of font systems that we have created for you, or you can add in your own fonts using Google Fonts.
To use one of the font systems, simply click on the font system you wish to use.
You will immediately be able to preview these fonts on the right side of the screen.
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 the + icon next to the font. You can select up to three fonts to use; one for the main headings, one for subheading and one for paragraph text.
Once you have selected your fonts, click on the box at the bottom of your screen.
The box will open up and you will see the Embed code as highlighted below.
You need to copy the whole embed code and paste it into the Google Fonts Code field on the Fonts tab like this:
This code calls in the fonts you have selected from the Google Fonts website.
The next step is to assign these fonts to your certain elements on your website. You can assign your fonts to three different elements:
- Main heading font
- Subheading font
- Paragraph 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 Specify in CSS 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 Roboto 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.
If you don’t fill in all of the fields, the fonts from the Font System that is selected above will be used instead.