We're always here to help...

Online management system for
independent bands and musicians

Frequently Asked Questions

"Advanced Designer" : How to Use Custom Fonts (Typekit Method)

If you've upgraded to "Advanced Designer", you can now add custom fonts to your website using a web service called Tyepkit. Typekit "... will change the way you design websites. Add a line of code to your pages and choose from hundreds of fonts. Simple, bulletproof, standards compliant, accessible, and totally legal."

FourFour together with Typekit is a very cool new way to use custom fonts for your main menu links, your page headings, and all kinds of other text elements on your website.

Integrate Typekit with your FourFour Website

1. Go to Tyepkit and create an account

2. Login to your Typekit account and create a Kit

3. In the Domains field, input your FourFour URL (i.e. http://BANDNAME.fourfour.com) or, if you've upgraded to "Go Official" and you're using your own domain, input your official URL (i.e. http://www.BANDNAME.com)

4. Skip over "Install JavaScript" by clicking the Continue button. We will automatically add the Javascript code into the HEAD section of your website for you, so there's no need to copy and install the Javascript that Typekit provides to you.

5. Browse the fonts, find the one you want to use, and add it to your Kit. Clicking the +Add button next to the font you want to use will popup a Typekit Editor window.

6. In the Typekit Editor window, click the Embed Code link in the top right (as seen below):

Click Embed Code Link

7. This will open a small modal window displaying your JavaScript code and your Typekit Kit ID. All we need is your Typekit Kit ID. So make a copy of your Typekit Kit ID (as seen below):

Copy Typekit Kit ID

 

IMPORTANT: Make sure you click the Publish button in Typekit to save your font settings and make them available to use on your FourFour website!

 

8. Login to your FourFour account

9. Go to Website Settings

10. Scroll down to the Typekit - Custom Fonts section, paste your Typekit Kit ID into the Typekit Kit ID field and save your settings.

Add Typekit Kit ID to Website Settings

 

Use Typekit Fonts on your FourFour Website

Your FourFour website will now automatically load your Typekit Kit with that ID and you can use the custom font you chose to style different CSS selectors on your site. You can do that one of two ways:

1. You can use the Typekit Editor on Typekit's website to assign the font to CSS Selectors on your site

2. You can use FourFour's CSS Editor to assign fonts to page elements by using the font-family property and the values provided by Typekit.

To use the CSS Editor and font-family property, go back to your Typekit Editor popup window in Typekit and click the "Advanced..." link underneath Selectors in left-hand column (as seen below):

Click Advanced Link

Copy and use the font-family values provided by Typekit in your CSS Editor to assign the font to an element on your site (as seen below):

Copy Font-Family Values

For example, here's CSS code you could add to your CSS Editor to use your custom font for the "Home" link in your main menu (using your own Typekit font-family values of course!):

#nav-home .nav-text {
   font-family: "vm74-1", "vm74-2";
}

There you go...an easy way to use our "Advanced Designer", Typekit, and some CSS code to replace default text with custom fonts. Enjoy!

Back to FAQs