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 Futuristic version of the Library Book Sale page is almost done, but before we move on, we need to check the Fallback fonts. We need to make sure the page looks good, even if the fonts don't load. We're still working with the file from the last lesson. If you didn't save yours, that is 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.
In the CSS section of the HTML page, let's type a capital X next to each of the font families so that they will break. And let's go ahead and save this and upload it to our servers and view it in our browsers. We can just refresh. Georgia doesn't quite work for our headline. I think that the difference between the bold and the regular is just too subtle. So let's go back and change that.
I think that a better font stack for our universal selector would be Arial, sans-serif, and for the h1, let's also do an Arial black, then an Arial, and then a Sans Serif. And for the lighter version of our h1, that lighter class, let's skip the Arial Black and just do Arial Sans Serif. Go ahead and save this, upload it to our server, and review that in the browser, refresh it. That looks better.
It's a little bit tight to the edge, and I would say the author's name is a little bit close to the headline because we did change that so that it would work better with the Tenby Eight. But we're at least getting that nice contrast between the bold and the regular stroke and then down here, we have the bold and regular fonts, so that looks pretty good. Let's go ahead and take those Xs out of our font families so that our fonts will work. Again, save that, re-upload it to the server one last time, and refresh.
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.