Using Adobe TypeKit on your site.


This is an easy way to add Adobe TypeKit to your web page, by using either Joe’s Letterpress stack or Foundation for RapidWeaver.

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.

Adobe Typekit Edit Kit Screen

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

Adobe Typekit Editor

This will bring up a lightbox style window that has the embed code you need to use.

Adobe Typekit Embed Code Window

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.

<script src="http://use.typekit.net/kdt1fhm.js"></script> <script>try{Typekit.load();}catch(e){}</script>

Embed Code Pasted In Site Wide Code

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.

Adobe Typekit Editor

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.

Adobe CSS Code

Decide what to do with your code

You will want to paste this code into either one of two places, it depends if you are using Foundation for RapidWeaver or if you are using the Letterpress stack.

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.

Foundation Text Settings

The way TypeKit works, you will not be able to preview the font, but it will work when published.

Typekit in Foundation Page

Letterpress

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.

Letterpress Stack Settings | Letterpress Stack Settings

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.

Letterpress Stack Settings

Again, you will not be able to preview this is RapidWeaver, so you will want to publish your page.

Letterpress Stack Settings

We hope you have enjoyed this tutorial, and good luck adding Adobe Typekit to your website!

No go forth and make your websites great!

Video Tutorial

Visit the demo site from the video.

You can download the project file.