Adding fonts to your website is quick and easy:

If you don't have a Typekit subscription yet, sign up for any of our plans.

Once you’ve created your account, choose some fonts!

You can toggle between the default & Japanese font collections from the selector at the top of the page.

Switching between font collections on typekit.com

Filter by Classification (e.g., serif or sans serif), Properties (e.g., x-height, width, or weight), or Language. You can also choose between two recommended categories: headings and paragraphs; these fonts are hand-picked by Typekit’s staff. And you can combine these filters any way you like: for example, you can narrow your results down to sans serif fonts, recommended for headings, with a narrow width, and low contrast that support English and Spanish.

Browse fonts page with sans-serif, Headings, English, Spanish, narrow width, and low contrast selected.

The collection of Japanese fonts has slightly different filtering parameters, to enable filtering for kana-only fonts, or style classifications like Mincho, Gothic, Maru Gothic, and Brush. Again, any number of filters can be combined for a more refined search.

Browsing the library of Japanese fonts

When you find a font you like, click the font card to go to the family page.

Selecting a web font to use

On the font family page, click the "Web use: add to kit" button, then choose “create a new kit."

The "web use: add to kit button" on the font family page.

A kit lets you configure the fonts that Typekit will apply to your website. Give the kit a name, and enter the domain(s) for your website. (You can add up to ten domains per kit, including subdomains and development domains.)

Creating a kit: choose a name and list the website domains

You’ll be given the JavaScript embed code for your specific kit. The kit editor will indicate where to add the embed code to your site: dynamic kits need the code at the end of the page before the closing </body> tag for optimal performance, while other kits go in the site’s <head> tag. (Read more about the different options in the embed code help page.)

Instructions for using the JavaScript embed code

To add more fonts to your kit, click the “Web use: add to kit” button and choose the kit name from the “add to an existing kit” menu.

Click Use Fonts to add another font to the kit

Now you have a few choices you need to make for each family in your kit.

Choose the appropriate character set for your website. Japanese fonts must be served with dynamic subsetting, while other fonts have language-based subsetting options. Click "Which should I choose?" for guidance, and read the Language Support & Subsetting help page for more information on the different options.

Language subsetting options in the kit editor

Next, select the weights and styles you would like to use.

Choosing the weights and styles to use in the kit editor

Keep an eye on the total kit size; too many fonts can slow down page loading. When your kit size exceeds 400K, you’ll get a warning to reduce the size to improve performance.

The kit size updates as you add or remove fonts
Adding CSS selectors in the kit editor

Finally, publish your kit. Within a few minutes, the fonts you selected will appear on your site. Remember to republish your kit each time you make changes.

Publish the kit to the font network from the kit editor

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy