Theme Documentation

Use the instructions contained herein to build out your awesome websites with our NationBuilder Mega-Theme & Custom Themes.

Customizing Fonts


Your Mega-Theme will by default come with a group of free Google Fonts we've chosen. If you want to change them, follow these instructions:


If you're using Typekit fonts (these instructions assume you know how to use Typekit - if not, see the instructions here):

  1. Locate the Embed Code Typekit provides and copy the Kit ID. If you're on the Typekit website, you can find it circled in red below [second image]. If you only have the actual code, it will be the part circled in green.
  2. Paste it into Theme → Settings → Typekit key.
  3. Not mandatory, but recommended for load times: go to Theme → Files → _nm-includes.scss
  4. On lines 32-34 (as of time of writing), you'll find the font scripts [shown below in the first image]. Delete these lines.
  5. Now scroll down (on this page, not in _nm-includes.scss) where you'll find "Now you need to actually tell the theme to use the fonts:" and follow those instructions.

nb-mega-theme-docs-font-scripts.jpg

nb-mega-theme-docs-typekit-embed-code-script.jpg


If you're using any font vendor besides Typekit (Google Fonts (100% free), Typography, Fonts.com are our favorites) (NOTE: these instructions assume you know how to use the font provider you've selected - if not, their help and support sections are easily findable on their websites):

  1. Copy the embed code or script the font vendor provides.
  2. Go to Theme → Files → _nm-includes.scss
  3. On lines 32-34 as of time of writing, you'll find the font scripts  [shown below]. Delete what's in between the <!-- Font Scripts Go Here --><!--/ Font Scripts Go Here --> comments and paste in your embed code or script.
  4. Now scroll down (on this page, not in _nm-includes.scss) where you'll find "Now you need to actually tell the theme to use the fonts:" and follow those instructions.

nb-mega-theme-docs-font-scripts.jpg


Now you need to actually tell the theme to use the fonts:

  1. Go to Theme → Files → _nm-variables.scss
  2. On lines 63-66 (as of the time of writing), you'll find the theme font declarations [shown below]. The theme takes three fonts:
    • $font-family-sans-serif: Line 63 (as of time of writing), the main font on your site - used by headings and anything that's not paragraph-type text.
    • $font-family-serif: Line 64 (as of time of writing), the paragraph-type font for your site. Used mainly in page content sections where large blocks of text are likely to appear.
    • $font-family-monospace: Line 66 (as of time of writing), used for button-type elements and the top navigation bar.
  3. Replace only the first font for each variable with your new font values. IMPORTANT: Leave the fallback fonts (the fonts after the first one) alone. For example, in the image below, you'd replace "Open Sans" for $font-family-sans-serif and $font-family-serif and "Open Sans Condensed" for $font-family-monospace, leaving all the fallback fonts (starting with Helvetica for $font-family-sans-serif and $font-family-serif and "Helvetica Neue" for $font-family-monospace) as they are.

nb-mega-theme-font-declarations-docs.jpg