Skip to main content

How can I add Google Fonts to my NationBuilder website?

I want to use custom Google Fonts, how do I install them on my NationBuilder website?

Official response from completed

Google Fonts are an amazing free resource for web designers. They are easy to use, easy to install, and make websites look great. Below we walk you through this installation method and how it works with NationBuilder.

Installing Google Fonts 

Go to Google Fonts and choose your font. For this example I am selecting the font called Oswald.


Click on "Quick Use" icon, as shown above highlighted in red.

On the following page, select which font weights and styles you want to use, then scroll down to step #3 and click the "Javascript" tab. Copy all the javascript in the window into your clipboard.

Next, go to your NationBuilder control panel. If you have not already, you will need to create a custom theme. Next, click Websites > Theme > layout.html and paste the Google javascript code just after the </head> tag. 

Your Google font is now installed!  In order for you to be able to see it on your website, you need to edit your theme.scss file and designate the styles you want to use the new font.

Go to Websites > Theme > theme.scss and add "font-family: 'Oswald', sans-serif;" to your styles. 

Do this by locating your “headline”, “main”, and “nav” fonts and enter the new font family information. In this theme, the “headline”, “main”, and “nav” fonts are located on lines 11, 14, and 17 respectively.

Save and publish after finalizing your changes.

Changing theme

These three locations are where the main font declarations are made. Note that depending on your theme, font declarations may be made in other locations and should be updated similarly. 

Showing 9 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.