Contact Us​​ | Status Blog
Help Center
Main Web Design and Development › Adding fonts to your website

Adding fonts to your website

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 font collections with the Browse Mode selector at the top of the right sidebar.

Switching between font collections.

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.

Screenshot of 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 want to use, click “Use Fonts” on the font card or on the family page. Select the Web tab in the window that opens, and then “create a new kit”.

Screenshot of creating the first kit

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.)

Screenshot of the create a kit page

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.

Screenshot of instructions for using the embed code

You can add more fonts to your kit at any time by clicking the “Use Fonts” button, selecting the Web tab, and choosing the kit name from the “add to existing kit” menu.

Screenshot of add to kit button

Now you have a few choices you need to make for each font.

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.

kit editor subsetting options

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

Screenshot of the kit editor pointing out the weights and styles selections

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.

Screenshot of kit editor showing kit size

Next, add selectors to each font. You can either add selectors in the kit editor or assign the font family names in your own stylesheet.

Screenshot of kit editor showing selectors

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.

Screenshot of kit editor showing publish button

Still need help? Email Us.

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found