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. In this example I am selecting the font called Poor Story.

Select which font weights and styles you want to use by clicking the + button.

Once you’ve added them, you’ll notice a box at the bottom of the page labelled “# Family Selected.” Click on it so it displays. Then, click on @Imports and copy all the javascript 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  'Poor Story', sans-serif; to your styles. 

Do this by locating your “main (fonts)”, “headline”, and “nav” fonts and enter the new font family information. These 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. In this theme, the “headline” and “main” fonts are located on lines 23, 26.

Save and publish after finalizing your changes.

Showing 11 reactions

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