Prepare your KIT

After that, browser fonts from the library. Pick your favorite font and add it into a KIT. If you haven’t had any KIT yet, it is required to create one.

Keep in mind that one KIT can contain multiple fonts.

Integrate your KIT with the site

Once your KIT is already created, you will see its appearance in the Kits page. From here, you can easily get the KIT’s ID and the kit editor button to launch the editor window.

Copy the KIT’s ID which is a sequence of 7 characters or numbers. Then go to Site Options → Typography → TYPEKIT. Paste the ID into the input field and click Create. After done, you already created a KIT box.

Remember that a KIT contains one or multiple fonts, the following step will require you to fill the font(s) data from the KIT. Click on the Plus icon on the right of the KIT box to create data for a particular font.

For example, our KIT contains 2 fonts which are Adelle and Acumin Pro then we should fill data of the two fonts into our KIT box.

There are three fields needed to be fullfilled, including name, family and fallback. The name field is simply the font name or whatever name which can help you distinguish the font. On the other hand, the family and fallback should be precisely picked from the KIT editor page.

From the KIT editor page, click on Using fonts in CSS, a popup containing the family and fallback information will be shown up. Check out the below figure for the detail.

There are no limitation for number of KITs you can create by the Site Options. However, to really activate the KIT for your site, the checkbox from the top left of your KIT box must be checked.

Finally, once you already activate the KIT, for any Font Source field from the ecosystem, you are able to select the fonts from the Typekit Font List.