Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course focuses on the theories behind web fonts: what makes a good font, why different fonts look the way they do, and how fonts affect the look of a web page. Author Laura Franz covers common tasks, including downloading a font from an online source such as Typekit or Font Squirrel, implementing the font in HTML and CSS, and changing the size and line-height to improve the readability of text. The course also covers different periods of type design and explores the history behind handwritten fonts, text fonts (used for large amounts of text), and display fonts (used for headlines).
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.
There are currently no FAQs about Choosing and Using Web Fonts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.