Custom fonts in themes

In this tutorial I'll show you in 3 steps how to use any Google Font in a RapidWeaver theme and how to target an element in your page or all pages of your project.

1 - First get the link to your desired font in Google Fonts https://fonts.google.com. For this example we are choosing the Montserrat font. Go to the Google Fonts page and get the standard embed code, it looks like this for Montserrat:

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

2 - Insert the above code in the custom header of the page or in the global Head for all pages in your project, like the screenshot below:

3 - Then go to global CSS (or the CSS field of a page) and set the element for the font, examples:

For all text elements use:

body {font-family: 'Montserrat', sans-serif;}

For headings only use:

h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', sans-serif;}

In specific containers, like extra containers:

#myExtraContent1 {font-family: 'Montserrat', sans-serif;}