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).
Now that we've picked a slab serif font, it's time to apply it to our Web page. In order to do this, we need to add Museo Slab to our Typekit, and then apply it to our site. We'll have to do it a bit differently this time, because we've already got two fonts in our trial plan kit. So first open up typekit.com, and sign in if you aren't already signed in. You can see we're at the Choosing and Using Web Fonts Kit; we have it selected. Now let's find Museo Slab, and click the button to add it to our kit, and you'll see a message pops up: With a Trial Plan, you may only use 2 fonts at a time.
So we need to remove a font from our kit. Let's launch our kit editor and remove one of the fonts. I'm going to remove Calluna, simply because it's not the most recent font that we used. You'll be asked to confirm that you want to delete it, and now we have only one font in our kit. Whichever font you delete will no longer work in the site you use this kit for, but you can always go back and add the font again if you want to use it.
We need to click Publish, so the change is published with Typekit, and they know to remove Calluna from our kit. Now that I've deleted Calluna, I want to show you a couple of things. First, something I find helpful. We can go and find Calluna, and we can add it to our Favorites, so if ever we want to add it back to our trial kit again, we can. It's now a favorite, and so if we go in Browse Fonts, and go to My Favorites, there's Calluna; it's just ready to be added right back to your kit, and you could do that right from this page.
The other thing that I want to show is, to be clear that Calluna will no longer work on previously made pages, let's open up a tab, and go to a previous page that we used Calluna on. Mine was at goodwebfonts.com/lynda. If I Refresh this page, and our page is still using Calluna, Typekit hasn't caught up with us yet. Sometimes it takes us few minutes for changes to take effect, even if we have clicked Publish. So we'll just have to wait a few moments, and try refreshing it again, and we can see that the page is no longer using Calluna.
If we zoom in, we can see that the crossbar on the e is no longer rising. The page has reverted to Georgia, which is our first fallback font. We'll go back to full size here. So, by removing Calluna from your kit, you've broken the link to it, and it no longer works. If you work with Typekit's trial plan, you need to keep track of what fonts you're using on your entire site, and don't plan to use more than two fonts at the same time.
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.