Video: Downloading a free font licensed for use on the web

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.

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).

Topics include:

Explaining the history of text fonts, from Old Style, Transitional, and Modern to Slab Serif and Sans Serif

Understanding font classifications

Setting up a Typekit account

Choosing a quality font based on forms, spacing, and weights and styles

Accessing fonts from various sources

Implementing fonts with the @font-face syntax

Looking at how fonts affect the look and feel of a web page

Changing font styling to improve readability

Making various font weights and styles work correctly across multiple browsers

Downloading a free font licensed for use on the web

So now that we've picked our geometric Sans Serif font, Museo Sans, we need toget 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 availablevia 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 andclick 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 opportunityto 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 ittakes 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 getthe 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 knowthat 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 grabthe free Museo 700 and add to cart.Now we have our text weight, a text italic, and a bold, and the bold does have aslight serif to it which is going to be a little different but they'll workbecause they have a similar structure, and I'm sort of interested in seeing howthat'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 candownload all of these.And when we're done, we now have the free fonts on our computers.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.