How to best include custom fonts in NationBuilder

Custom fonts, outside the limited subset of "web-safe" fonts, can be used in NationBuilder to underscore your brand identity and message. While we recommend a web font service such as Typekit, Google Web Fonts, or Adobe Edge Web Fonts for including custom fonts, it's also possible to use the @font-face CSS rule to include base64-encoded fonts right in your stylesheet.


Typekit

Because NationBuilder uses TypeKit, you can easily use the following high quality fonts on your website; simply modify the fonts defined in your theme.scss stylesheet with the font-family values below.

Please note that because Typekit restricts access to a specific domain, you'll need to create your own kit if you set up a custom domain. Learn more about registering with Typekit here.


Chunk
 by Ms. Meredith Mandel.

font-chunk.png

font-family: "chunk-1","chunk-2"


Lobster
 by Pablo Impallari.

font-lobster.png

font-family: "lobster-1","lobster-2"


Museo Sans
 by exljbris Font Foundry.

font-museo-sans.png

font-family: "museo-sans-1","museo-sans-2"


Myriad Pro
 by Adobe.

font-myriad-pro.png

font-family: "myriad-pro-1","myriad-pro-2"


Museo
 by exljbris Font Foundry.

font-museo.png

font-family: "museo-1","museo-2"

To get the font-family values of Typekit fonts not listed here, you can use your own Typekit account or a free trial account to browse the Typekit library for the font you wish to include. Then, add it to a kit, and from the "Selectors" area click on the "Using fonts in CSS" link to grab the CSS name of the font family:

typekit.png


Google Web Fonts

It's also simple to use free Google Web Fonts on your nation.

google-fonts.png

After selecting your fonts, click on "Use" at the bottom of the screen, make your selections, and copy the "Standard" Google code provided. It will look something like this:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans|Gafata' rel='stylesheet' type='text/css'>

In your layout.html template, paste the Google code within the <head></head> block:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>{{ page_title }}</title>
    <link rel="stylesheet" href="theme.scss" type="text/css" />
    <link href='https://fonts.googleapis.com/css?family=Droid+Sans|Gafata' rel='stylesheet' type='text/css'>
    {{ content_for_header }}
</head>

Note: Be sure that the URL for the Google Font file is secure (https). Otherwise it will not properly render on secure pages, such as your site's donation page. You may also optionally remove the http: all together, which will have the same affect. (ex: //fonts.googleapis.com/css?family=Unkempt:400,700)

You can use the font by modifying theme.scss with the font-family values specified below the embed code on the Google Fonts' "Use" page:

google-fonts-2.png


@font-face

If you can't find your desired font on Typekit, Google Web Fonts, or another web font service, it's also possible to import a font into theme.scss using the @font-face CSS rule and base64 encoding.

Base64 font encoding is required for the font to work properly in browsers that don't allow cross-domain font imports, such as Firefox. The Opinionated Geek's base64 encoder tool allows you to encode fonts in base64; simply upload a .ttf of your font, and paste the output as a data URI within your CSS file:

@font-face {
font-family: 'your-font';
src: url("your-font.eot");
src: url("your-font.eot?#iefix") format('embedded-opentype'),
url("data:font/opentype;base64, …BASE64 ENCODED FONT HERE… ") format('truetype');
}

To import the CSS file housing your font into theme.scss, you'll need to name it in the form of a SASS partial, such that it starts with an underscore and ends with the scss file extension: "_new-font-stylesheet-name.scss". Upload this scss file, along with the .eot font files (these are necessary for IE8 support), to the "Files" area of your current custom theme.

In theme.scss, add the font by using a SASS import:

@import "new-font-stylesheet-name";

We recommend that you add this import at the bottom of theme.scss, since the encoded font's file size can be hefty.

In extreme cases where many fonts are included this way, due to the size of the font embeds, you may notice a performance impact on your load times, or erratic behavior upon saving the stylesheet. A workaround for this would be to directly reference the compiled theme CSS within layout.html instead.

To get the compiled stylesheet, open up a page on your website, and view the source code for that page:

font-face-2.png

On the source page, search for "theme.scss", and open the direct link to the compiled stylesheet:

font-face-3.png

Save the stylesheet locally as a CSS file, and upload this file to the custom theme's "Files" area. Once it's uploaded, copy the link address to the compiled CSS file:

Screen_Shot_2014-04-11_at_2.38.59_PM.png

Then, in layout.html, replace "theme.scss" in the stylesheet link with the link to the compiled stylesheet you've copied:

Screen_Shot_2014-04-11_at_2.40.25_PM.png

Finally, save and publish the updated template.

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.