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 filter by Classification (e.g., serif or sans serif), Properties (e.g., x-height, width, or weight), or Language. You can also filter by 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.
When you find a font you want to use, click “Use Fonts” on the font card or on the font detail page. Select the Web tab in the window that opens, and then “create a new 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.)
You’ll be given the embed code for that kit; copy and paste it into your site’s
<head> tag. (If you're using Typekit with some blogging platforms, you can copy the Kit ID—the seven-character alphanumeric code listed at the bottom of the window —into your blog's settings instead. Read more about using Typekit on your blog.)
You can add more fonts to your kit at any time by clicking “Use Fonts”, selecting the Web tab, and choosing the kit name from the “add to existing kit” menu.
Now you have a few choices you need to make for each font.
First, choose the appropriate character set for your website. Click "Which should I choose?" for guidance, and read the Language Support & Subsetting help page for more information on the different options.
Next, select the weights and styles you would like to use.
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.
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.
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.