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 must select all of the fonts you wish to use before continuing to the next step.
⚠️ Note: By default, the Momentum stock theme has two fonts. For best results, choose two fonts that follow the default serif type, which is one with serif and one sans-serif.
You'll see this page, where the embed code and font styles are displayed. Leave this tab 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 _momentum_variables.scss file.
Leave these tabs 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 lines 25-26 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 two main fonts used in this stock theme. One for the body content, top nav menu, form fields, and buttons, and one for the section headings and featured content slider. In the _momentum_variables.scss file, line 37 controls the font for body content, form fields, buttons, and the top nav. This is where the sans-serif one you selected goes. Line 38 controls the section headings and featured content slider. This is where the serif one you selected goes.
For the body content, top nav menu, form fields, and buttons
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 semicolon at the end, including the semicolon.
Example: "Gruppo", sans-serif; is what you'd want to copy for the Gruppo font. Replace the font name and serif type listed on line 37. Here's what it will look like once completed:
Headlines, section headings, and featured content slider
Once you've edited line 37 for your content body, etc, go back to your Google Fonts tab and copy the name and serif type for the second selected font. Copy from the opening quotation mark 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 38 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.
