Step 1
Login to the CMS.
Step 2
Go to any page in the tree menu. For example, click on the 'Home' page.
Step 3
In the bottom right, click 'Save and Preview'. Preview mode will now load in a new tab or window.
Step 4
On the right-hand side, you will see two buttons. One with a Paint Bucket icon and the other a Pencil icon. Click on the 'Paint Bucket' icon to access the Visual Designer.
Step 5
In the slide-out panel, go to the 'Fonts' tab.
You'll note this is split into two main parts, first 'Fonts' then second, 'Typography'.
Fonts — This is where you set the fonts you wish to use throughout your design. For instance, you could choose the 'Montserrat' font from Google Fonts. Once that is selected the choose the 'Font Style' from the dropdown and finally the 'Font Weight' available for this particular font from the dropdown.
Typography — This is where you use the 'Fonts' you added above and specify where to use each in your design. For instance, the 'Fonts' added will now appear in the 'Font' dropdown next to each selector when you open them up. You can then select 'Line height', 'Letter spacing', 'Text transform', and the 'Font size' at five breakpoints.
Step 6
Add as many or as few (at least) fonts to your 'Fonts' section. Use the delete icon to remove an existing font and the plus icon to add more.
You can choose from Google Fonts, Adobe Fonts or System Fonts. Mix and match if you require.
Step 7
Under 'Typography' set the font for each selector e.g. 'Body', 'H1', etc.
Step 8
Once you're happy hit 'Save and publish'.
