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).
We've already added the @font-face Syntax to our CSS. Now we need to tell the browsers that we're using these fonts in our page. We do this by setting the font-family. Go ahead and select and copy the MuseoSans500Regular font-family, down in our Universal Selector, we can add that along with a comma so that we have a font stack. Now, you'll notice that I copied and pasted, it's very important that this font-family match the font-family up here, and that's because the browsers know when they see the font-family down here that they should look for the Web font files associated with the font-family up here.
Let's go ahead and save this and view it in our browser. And it is not working, it is in Arial. I knew this would happen. I wanted to show you a very common problem. The reason why this is not working, let's go back into our editor here, is because our @font-face declaration is telling the browser to look for the fonts via this URL and it's looking directly for the Web Font files, so it expects to find the Web Font files in the same folder that the CSS is in.
But my Web Font files are still in my Download folder, so I need to move those over. So first, I will start with my 500s, I will grab all four fonts and I will move them to my Exercise Files, my city_site, and now they're in the same folder as my HTML file that has my CSS in it. Go ahead and get the rest of the files now.
Now, if I go back to my browser and refresh this, Command+R, we can see that it is using Museo Sans. But there is a problem here. I'm going to zoom in, Command++ and show you that bold is faked. We know this for two reasons. One, the bold that we used has some slight Serifs on it and there are no Serifs here. I'm going to keep zooming in on this. The other way that we can tell, is we can tell this has been slightly faked because the letters have been just slightly stretched vertically.
We can see in the letter e very clearly that the right side and the left side are a little heavier but the top line is not, and that's because it's been stretched horizontally actually, so we get this point at the top of the e, especially in the counter form. So this is a fake bold. We need to go back and fix this. First, I'll zoom out, Command+0, and then toggle back to my editor. And what we need to do is add the correct font family anywhere we're going to use the italic or the bold.
So let's set our italics first, and I usually do this by copying and pasting as much as possible to avoid mistakes. The first place I'm going to have a italic is in the tagline here. I put in a new font-family line, and here you can see it still says MuseoSansRegular, and that's not correct. So let's go up and find our Italic, Copy that, scroll back down to our tagline, Paste that in.
So now our tagline will come in as italic and we need to get rid of this font-style: italic as well because we don't want it to double italic. Now let's see where else we use italic, we can just Copy this and Paste it in as needed. We use it in the em, get rid of font-style: italic, and we use it in the quote, get rid of font-style: italic. Now let's go ahead and do this for the bolds as well.
In our h4 we have a bold. So I put in the font-family but right now it still says Italic so let's go find our bold, Museo700Regular, Copy that, scroll down to my h4, change it to the 700 Regular, and get rid of the font-weight: bold, because we don't want it double bolded, and then I'll Copy that whole line and then down here in strong, I will add the bold weight font and get rid of the font-weight.
Let's Save that and go back into our browser and take a look. I'll Refresh and we can see that the bold is coming in correctly and the italics are pretty much coming in correctly here in the tagline and over in the quote, but it is not coming in correctly in the word, Union. Do you see how Union is slanted over even more than for instance, the word library? That means that Union has double italic attached to it, and let's go back in and fix that. The reason that happened is because the em here has a default style and it will come in as italic unless we declare that it should be normal.
Let's go ahead and Save that, back in our browser, Refresh, and that's much better. Union is now fixed and the fonts are all working properly in the site. Next, we're going to style our text to make sure it looks as good as possible. So save this file for the next lesson.
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.