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 have our Web font files, let's get our @font-face syntax into our CSS. First, let's make our document. In the Exercise Files, you can open up the original Arial site with your text editor and let's save that as museo_sans_site, and we can save that in the same folder since we won't be rewriting anything.
Now, let's go get the CSS syntax that we need. Downloads, we can go to Museo Sans 500, into Web fonts, and I'm looking for the stylesheet.css. So open that up and we can see here that we have the vendor information and then we also have the @font-face syntax, which is what we need. Let's go ahead and copy all of that and then in the Museo Sans site, in the CSS section of the HTML document, right above the universal selector, we can paste that.
And we now have the CSS in for the Museo Sans 500 Regular. Now let's get the @font-face syntax in for the other two weights and styles. Now looking at this syntax, each one is very similar, I'm going to walk you through it here. The first line says this will be an @font-face syntax that I'm declaring. The second line gives us the name of the font-family that says this is MuseoSans500Regular. The third line makes the syntax compatible for Internet Explorer 9 and higher.
The fourth line makes the syntax compatible for Internet Explorer 8. The next line, other recent browsers like Firefox and Chrome, will know where to go get the font files that they need. The next line will tell other older browsers where to get the font files that they need. And the last tells older iPhones and iPads where to get the font file they need. Then we have a font-weight: normal and a font-style: normal and then the declaration closes. You'll notice that even in the bold version that we're using, the font-weight is normal.
And even in the italic version we're using, the font-style is normal. Fontspring creates a separate font for each weight and style, then sets weight and style to normal. This increases support and avoids creating fake bolds and fake italics in Internet Explorer. It still works because the fonts themselves are bold and italic regardless of whether they're set to bold and italic in the @font-face declaration. Okay. So the @font-face syntax is a new document, let's go ahead and save that.
We've completed step one of the process. Next, we'll tell the browsers to actually use these fonts in the text. So keep 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.