Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
On the Browse Fonts page, you can see all the fonts available to use. If you click on one of these fonts, such as Museo, you will see you could add this font to your kit. That's because it's included in the trial library. If you try to add a font not available in your plan, it would tell you here in this corner what plan the font is available in, and then this button would change and give you the option to upgrade your plan. We know what font we want to use, so we don't have to browse for it, we can search for it, and we are looking for Calluna.
Here it is; this is the font we want to use, and we can add it to our kit. You can see up here that we have the Choosing and Using Web Fonts kit activated. If you had more than one kit, you'd be able to move between them here, and if you had a plan that is not the trial plan, you'd be able to add a new kit. But since we have the trial plan, if we try to add a new kit, it will give us a message that says with a trial plan, you may only create one kit. So let's add this font to our kit.
And this is what the kit looks like, and we can see that Calluna is in the kit. We can have up to two fonts in this kit, and if we had two fonts, they'd both be listed here. On the left, you can see the Weights & Styles of Calluna that we can put in our kit. Right now, Regular, Italic, Bold, and Bold Italic are all selected. The more weights and styles you have selected, the bigger your kit will get. If we look down here at the bottom, we can see that our Kit Size is 112K, and that we are in the Choosing and Using Web Fonts kit.
Because each weight and style adds to the size of the kit, don't select any weight or style that you do not expect to use. So the file I'm going to have you work with doesn't necessarily use a Bold Italic, so let's turn off that option. And then you can see our Kit Size has gone down even further. On a side note, Typekit recommends keeping kits below 400K. If a kit ever gets bigger than that, they'll notify you, and recommend that you reduce the kit size.
Now, above the Weights & Styles is our Language Support. I recommend using the Default. Next, we need to publish the kit. Changes won't take effect until you click the Publish button. Now Publish is a bit of a misnomer; clicking Publish does not publish your page. Clicking Publish basically makes your type choices official, and tells Typekit, my kit called Choosing and Using Web Fonts contains these fonts. If you ever come back to the kit and change the fonts, you need to republish your font choices, so Typekit knows what is in the kit.
And now we're ready to add the fonts to our Web site.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 47297 Viewers
117 Video lessons · 34249 Viewers
113 Video lessons · 80252 Viewers
116 Video lessons · 70176 Viewers