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 downloaded the three free Web fonts from Fontspring, let's open them up and take a look at them. In my Downloads folder, I can see that my zipped files have already opened and let's look at Museo Sans 500. Inside I have the license for the font and the OpenType format file. In a folder called web fonts, I have the @font-face license and a file on how to use these fonts. Then I have this other folder. In this folder, I have a demo and I have four different Web font files.
I have the EOT, which is for Internet Explorer 9 and earlier; the SVG, which is for early versions of iPhones and iPads; the TTF, which is a raw TrueType file that most of the other browsers use; and last, we have the WOFF, which is a Web-Only Font Format. It's the emerging standard for the last year or so, so many of the newest browsers use WOFF. There's also a folder for the specimen files and these support the demo up here. Now let's go ahead and open up that demo.
I always open up the demo file before I start using a font. I like to make sure that it all downloaded correctly, so if I have any problems getting it to work, I know it's on my end, not a problem with the font. Now I want to take a moment and point out that not all offsite links from Font Squirrel will take you to Fontspring. And because Fontspring and Font Squirrel are sister sites, all these files that we just downloaded here, all the files that we need in the demo file, these are very similar from Fontspring as we would have gotten from Font Squirrel.
So what happens if Font Squirrel takes us to a site where we don't get all these files? Well, let's take a look at that. Let's go to Font Squirrel and let's go to MEgalopolis. So MEgalopolis is another font that must be downloaded offsite and does not offer the @font-face syntax for us. So why don't we download that offsite and see what happens? We're taken to the SMeltery which is the site for the font designers.
Let's take a moment to read the EULA. That stands for End User License Agreement. We can see here in the fifth item down that this font may not be redistributed, shared, repackaged, or included, etcetera, etcetera, and so this is why Font Squirrel did not include it on their site. Instead, they gave us a link to this site where we could get it directly from the SMeltery. We can also see that two items down, Embedding this font in a Web page with an @font-face declaration is allowed once you credit SMeltery with the links somewhere on your site.
So we can use this for the @font-face syntax, so that's good. So why don't we go ahead and download this font? Click on Download and then click on OpenType, and yes, we do want to download this. Back in Downloads, we can see that we now have the MEgalopolis file, but all we have is the OTF. We don't have a demo file, we don't have any of the Web font files. So so far we can't really use this with an @font-face syntax, but we can make an @font-face Kit back at Font Squirrel.
So let's go to Font Squirrel, and this time let's go to the @font-face Generator. We're going to generate our own kit. Now they're under construction today, so it looks like that they're upgrading their powerful hardware and they have removed some of the features that will be added back in the next few months. But let's take a look at this and see what we get. We'll add our MEgalopolis font here and we'll go ahead and just work with Optimal and we can say, Yes, the fonts I'm uploading are legally eligible for web embedding.
We've read that EULA and we know that that's true. Now let's download our kit. Back into our Downloads folder, we now have a webfontkit, and if we take a look at it, we have some very familiar files here. We have a demo that we can open, so right-click, and we can see from the demo that the font has downloaded correctly and that it works. That's great. And we can also see that we have three Web font files here.
We have the EOT, the TTF, and the WOFF. So one of the things that must not be working right now on Font Squirrel is the SVG file. That's okay though. They'll probably get that up and running within the next few months. It's been there for a while. But we can still work with this if we needed to. So when it comes to using @font-face, fontsquirrel.com is a great resource not just because it provides free fonts available for font-linking, but because it also has the @font-face Generator.
Just make sure you only use fonts legally eligible for font-linking and definitely test these fonts that you make cross-browser. Web fonts need different hinting so they'll hold up on the screen. A font that's great for print may not look very good on the screen even if you do have the Web font files needed to make the font work.
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.