Using Adobe TypeKit on your site.
First you will need to login to the Adobe TypeKit website. We are not going to get into creating a login or setting up different kits in Adobe TypeKit, you will need to learn how to do that on the TypeKit website. Be sure once you have everything set up, that you publish your kit, or it will not be available to use.
Once you have your fonts added to a Kit, you will then want to click on the Kit link and edit the kit that has the font you want to use.
When you open the Typekit Editor you will want to get a couple bits of code. First you will want to click on the Embed Code
This will bring up a lightbox style window that has the embed code you need to use.
Look at the area marked Default Embed Code and highlight and copy that code (do not close the Typekit Editor, but you can close the lightbox). We suggest you paste the code into the Site Wide Code area of RapidWeaver. We also suggest that you add http: in the src area. Like below.
Once you paste that in, go back to the Adobe Typekit Editor window in your browser. Look for the link that says Using fonts in CSS link under the Selectors area and click it.
This will bring up another Lightbox type window, with CSS code in it. You want to use the top bit of code, it is the Font Family name. Highlight it and copy it.
Decide what to do with your code
Foundation for RapidWeaver
Go to the Site Styles stack and look for the settings called Foundation - Text. Find the font settings you want to use with your font, and change it from the default settings to Custom Definition and enter the Font Family name you copied from before and paste it in the box that pops up when you choose Custom Definition.
The way TypeKit works, you will not be able to preview the font, but it will work when published.
Add a Letterpress stack to your page. Then go to the Letterpress - Advanced settings and change the Style setting from Theme Font to Custom Definition.
A box will appear below the Style setting that asks for a Custom Font name, enter the Font Family name you copied on the Adobe Typekit page.
Again, you will not be able to preview this is RapidWeaver, so you will want to publish your page.
We hope you have enjoyed this tutorial, and good luck adding Adobe Typekit to your website!
No go forth and make your websites great!
Visit the demo site from the video.
You can download the project file.