Whilst the themes in the Rainmaker Platform are beautiful and look great out of the box, you may want to add a custom font to the theme to give it a more distinctive feel.

In this video I will show you how to add Google Fonts to your site and make adjustments to specific text with CSS code.

Video Instructions – click play below

Text instructions

To adjust the type of font that is used on your site, you will firstly need to select the fonts you want to use, embed the resulting script code into the ‘Appearance’ area in your Rainmaker dashboard and finally, add CSS code to the ‘Custom CSS’ area to change the font used by the text you want to change.

Follow the text instructions below.

1. To use a Google font on your site, locate the font you want to use at https://www.google.com/fonts. Add the fonts to a ‘collection’ by using the plus icon beside the font. Once you have chosen all your fonts, click the black box at the bottom of the screen.

2. In the pop up box, copy the embed code provided by Google

3. To add the code, navigate to ‘Design’ –> ‘Appearance’ –> ‘Scripts’ –> ‘Header Scripts’ in your Rainmaker Admin and paste the code into the box provided. Save the settings once done.

4. Now that the font script has been added, you will need to locate the element that the font change is to be applied to. To locate the right area to target for the change, I recommend using an application that can be added to Firefox, called Firebug. Using this tool, you can see the existing code of your site and copy it for your CSS adjustments

5. Navigate to ‘Design’ –> ‘Custom CSS’ and add the CSS code of the font that you wish to change. Use the code snippet that Google fonts provides under the ‘Add this code to your website:’ box. It will look something like: font-family: ‘Open Sans’, sans-serif;

6. Once you have saved the CSS code, go back to your site and refresh the page to see the changes.