Using Google webfonts and Nationbuilder

Friday, June 08, 2012

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;


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


    Test and enjoy!!


Please check your e-mail for a link to activate your account.
The most technologically advanced union in North America
We read every Federal NDP bulk email from the 2015 Canadian election so you don't have to
Helping Higher Ed Alumni Associations Move into the 21st Century