All Collections
Website
Theming
Tweak a stock theme or page template
How to include custom fonts in NationBuilder
How to 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.

Updated over a week ago

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-family: "chunk-1","chunk-2"

Lobster by Pablo Impallari.

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

Museo Sans by exljbris Font Foundry.

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

Myriad Pro by Adobe.

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

Museo by exljbris Font Foundry.

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:

Google Web Fonts

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

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:

@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. On the source page, search for "theme.scss", and open the direct link to the compiled stylesheet. 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:

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

Finally, Save and Publish the updated template.

Did this answer your question?