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.