Skip to main content
All CollectionsWebsiteStock themes
Changing fonts in the Raise theme
Changing fonts in the Raise theme

Personalize your site with the fonts of your choice using Google Fonts.

Updated over a week ago

Step 1: Create a custom theme

If you haven't done so already, clone your theme. This will allow edits such as your font change.

Step 2: Select fonts to use in Google Fonts

Open Google Fonts and select the fonts you wish to use. You should select all of the fonts you wish to use before continuing to the next step. This is important!

Once you have selected your fonts, click Get Embed Code.

From there, you'll see this page, where the embed code and font styles are displayed. Leave this open for later.

Step 3: Open theme files in your NationBuilder control panel

Navigate to Website > Theme > Files. Open two web browser tabs, one with the Layout.html file and one with the _variables.scss file.

Leave these open and switch back to your Google Fonts tab.

Step 4: Copy the embed code

In your Google Fonts tab, click the button labeled < > Get embed code.

This brings you to the page where the embed code and font styles are displayed. Click Copy code.

Step 5: Place embed code

Once you have copied the embed code from Google Fonts, switch to the tab you opened with the Layout.html file. Replace line 48 with the code you copied. Click Save and publish. You can close this tab now if desired.

Step 6: Place fonts

⚠️ Please note: There are 2 main fonts used in this stock theme. One for headings, the featured content slider, etc., and one for the content body. In the _variables.scss file, line 245 controls the font for the Featured content slider, section headings, and the top navigation menu, while line 243 controls the content body.

For the Content body

Return to your Google Fonts tab, and decide which fonts you'd like to set for your content body text. Copy the name and serif type (serif, sans serif) of that font. Copy from the opening quotation mark to the end of the word serif, but be sure to leave off the semicolon at the end. ⚠️ Note: It is very important to leave the semicolon off for the content body font.

Example: "Roboto", serif is what you'd want to copy for the Roboto font. Replace the font name and serif type listed on line 243. Leave the !default; there. Here's what it will look like once completed:

Headlines, Featured content slider, and Top nav menu

Once you've edited line 243 for your content body, go back to your Google Fonts tab and copy the name and serif type for the desired font. For this one, copy from the opening quotation marks to the semicolon at the end, including the semicolon.

Example: "Baskervville SC", serif; is what you'd want to copy for the Baskerville SC font. Replace the font name listed on line 245 with the copied text. It should look like this when completed:

Click Save and publish changes to save your changes and switch to the newly entered fonts.

To view your site with the changed fonts, click the Live site link from the top menu.

Did this answer your question?