You are here

Integrating Typekit with Custom Domains on Nationbuilder

Submitted by Meredith on January 26, 2012 - 2:11pm

NationBuilder

One of the custom theming options that NationBuilder offers its customers is an integration with Typekit. This means that you can use a handful of custom fonts such as Museo-Sans, Myriad-Pro and Lobster simply by plugging in the font name like “museo-sans-1” to your CSS style sheet. You can find more information about that feature here.

However, if you move your NationBuilder site to a custom domain, your Typekit fonts will no longer work. To fix this issue, you’ll need to set up a new account with Typekit.

To do this, start at Typekit.com and select “Register” in the upper right hand corner. It will then take you to their plan pricing page. Typekit offers a free plan with 25,000 pageviews per month, 1 Website, and 2 fonts per site. Don’t be deterred by the “Trial” name - it does not expire.

After picking your plan, you’ll go through several more screens asking you to input your name as well as the url of the site on which you’ll be using the fonts. Typekit will also supply you with a javascript code to input into the

of your site. You do not need this code; ignore it. NationBuilder has already configured your site to integrate with Typekit.

Once registered with Typekit, you’ll be dropped into your Font Library. To begin using a font, hover over the font name and select “+Add to Kit”. Remember, you’ll only be able to add two fonts to your Kit if you are using the free version.

When you’ve settled on a font, edit its properties by selecting “Launch Kit Editor” in the upper right-hand corner of your top menu navigation bar. You’ll have options to add things like “Selectors” and “Weights and Styles”. When you’re finished with your font, select “Publish” in the lower right-hand corner. Be sure that you’ve put the correct font name in your corresponding style sheet. You can double-check this by clicking “Using fonts in CSS” in the lower right-hand corner of the “Selectors” section of your Kit Editor.

Finally - you’ll need to make sure that your Typekit key is plugged into NationBuilder. To find the key, go to “Embed Code” in the top right-hand corner of your Kit Editor. Below the javascript it will say: If you're using a plugin or service that asks for a Typekit Kit ID, use this: and then it will offer you a code that looks something like this: axw4uxh. In NationBuilder, input this code under “Pages”-->”Theme”-->”Site”-->”Current Custom Theme”-->”Settings”-->”Typekit Key”.