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).
Our Wood Type version of the Library Book Sale Page looks great. But before we move on, I want to check the fallback fonts. I want to make sure the page has a similar feeling even if the fonts don't load. We're working with the file from the last lesson. If you didn't save yours, that's okay. I've provided a new starting point for this lesson. Just make sure you put your embed code in the document so your Typekit fonts will work on your system. Let's open up our document now.
Mine is already open in my text editor. Let's make our fonts fail. I do that by adding a capital X for each of the font families and saving it, we'll go ahead and upload this to our server, and back in the browser, we can refresh, and nothing breaks. But Georgia just looks sort of wimpy. The h1 needs a heavier fallback font. I think I'd recommend Impact.
It's not a great font for text because it's so heavy, but it will work at this size and it would create a strong heading. So let's go back into the text editor and for h1, let's make our font stack Impact and then I'm going to add Arial Black. Impact needs to be capitalized, so let's do that there. Then I'm going to change Georgia to Arial and let's change this to a Sans Serif for h1. And then for the universal selector, why don't we go ahead and use an Arial and Sans Serif as well? I think the sort of vertical structure of Arial would work better with the Impact or the Arial Black than the Georgia would.
Let's go ahead and save that, re-upload it to our server, and refresh it in our browser. This looks good. It's not great, but it's much better than the Georgia. So let's go ahead and just change our fonts back so that we are not keeping our fonts breaking here on our server, but I think we can be happy with this with our fallback fonts. Back into TextWrangler, let's take off those Xs so that our fonts will work and re-upload it to our server after we've saved it, back in the browser and refresh, and we're back to the finished page.
But now we know, even if the Web fonts don't work, the heading will still feel strong and the text will work well with the heading.
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.