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).
So now that we've picked our geometric Sans Serif font, Museo Sans, we need to get it into our city site. Museo Sans has multiple weights and styles available on Typekit through the Trial Plan. It has 100 through 1,000. But we're going to go about getting the font into our site using @font-face. Quite frankly, because there are so many more weights and styles here available via Typekit, that's probably how I would usually access Museo Sans, but I want to make sure you know how to use the @font-face syntax.
There have been a few small changes recently and this will give you the updates. It's important to know how to use the @font-face syntax because there are Web fonts out there that aren't available from either Google Web Fonts or Typekit, and some are free fonts. You can find them at Font Squirrel, on the websites of type designers, and from services like Fontspring and MyFonts.com. Others are fonts that you'd have to purchase a license in order to use, but you would still need to make them work yourself using @font-face.
So let's start by going to Font Squirrel, and we can search for Museo Sans and click on the name of the font. And you'll see here that even though Museo Sans is @font-face-compatible, which means it's been approved for use on the Web, it doesn't give us the opportunity to download an @font-face kit. The only thing that we can download is the OpenType Font and we would have to do that offsite. Now most fonts will actually give you the @font-face kit. Here I've opened the PT Sans font.
You can see there's a link here to the @font-face kit. But because of the licensing, Font Squirrel is not allowed to disseminate or to share this font, so we have to go back and get it from somewhere else. So let's go ahead and click on the Download OTF, which is offsite, and it takes us to Fontspring. Now Fontspring looks a lot like Font Squirrel because it's a sister site, and we can see here we are at the Museo Sans page. And as we scroll down, at first it may seem like you're not going to get a free font here.
But that's just because some of the weights and styles are not free and others are. Here's the one we're looking for, Museo Sans. We can add this to our cart. And then we also want to get the italic, so let's go ahead and back up and get the Museo Sans 500 Italic and add that to our cart. Let's back up again because we need a bold. Now the Museo Sans 700 is not free and that's our bold, but I happen to know that Museo Bold is free, so let's search here for Museo. Here we go! Find fonts, and you can see that we have a number of options for Museo.
There's four different fonts and they all have a very similar structure if you'd just look at the word Museo going down this line. And the main difference tends to be the serif. So let's go into Museo here down at the bottom, scroll down, and we will grab the free Museo 700 and add to cart. Now we have our text weight, a text italic, and a bold, and the bold does have a slight serif to it which is going to be a little different but they'll work because they have a similar structure, and I'm sort of interested in seeing how that's going to affect the final texture on the page.
So now we can check out and you'll need to log in to your account to check out, and if you don't have an account yet, you can create a new account and we can download all of these. And when we're done, we now have the free fonts on our computers.
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.