Using Google webfonts and Nationbuilder - cStreet Campaigns

Using Google webfonts and Nationbuilder

Nationbuilder comes integrated with Adobe Typekit which is a great resource for beautiful fonts. But, if you're looking for an open and free resource for nice type, using Google Webfonts is super simple with Nationbuilder as well. 

Quick and simple instructions: 

  1. Go to Google Webfonts and choose your fonts. You could spend all day looking through their catalogue so we recommend looking through some resources for pairing fonts first, especially if you don't have too much experience in design or layout. Try these to get you started: 10 Great Google Font Combinations  and this article on font pairing 
  2. Choose the fonts you would like to use by clicking "add to collection" next to the font preview
  3. At the bottom of the screen you can click "Review" to see your fonts in action together and "Use" to get the code to use them on your site
  4. Under Use, copy the text in the box that says "Add this code to your website"
  5. In a new tab, go into your Nationbuilder panel, select your page>theme>layout.html and paste the code directly under the <head> tag
  6. Go back to the Google Webfonts tab and copy the text under the "integrate the fonts into your css" (e.g. 'Raleway', cursive; 'Goudy Bookletter 1911', serif;"
  7. In your Nationbulider panel, select your page>theme>theme.scss and paste these under //fonts, replacing the fonts which are already there. So: 

    $fonts: Helvetica, Arial, sans-serif;
    $form_field_font: Helvetica, Arial, sans-serif;
    $headline_font: Helvetica, Arial, sans-serif;
    $headline_weight: bold;

    becomes

    $fonts: 'Goudy Bookletter 1911', serif;
    $form_field_font: 'Goudy Bookletter 1911', serif;
    $headline_font: 'Raleway', cursive;
    $headline_weight: bold;

     

    Test and enjoy!!

originally published Friday, June 08, 2012
Amy Leaman by