• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Nifticious

building seriously nifty websites, minus the geekery

  • Genesis
  • Rainmaker

Adjust The Look Of The Text In Your Raimaker Theme Using Google Fonts

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.

Filed Under: Rainmaker Platform Tagged With: Theme Design

Primary Sidebar

Hi There 👋, it's great to see you!

I promise I'm not spying on you, but I've noticed you've watched a few tutorials on how to do more with the Rainmaker Platform.

If you are looking to hire someone that can help you with your Rainmaker website, head over to my Contact page and send me an email.

But if you just want to keep watching the free tutorials, that's absolutely fine.

Happy Browsing 😀

Copyright © 2023 · Genesis Sample on Genesis Framework · WordPress · Log in

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.