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)
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):
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.
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):
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):
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!):
There you go...an easy way to use our "Advanced Designer", Typekit, and some CSS code to replace default text with custom fonts. Enjoy!