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've picked a font with transitional characteristics, it's time to apply it to our Web page. First, open up the georgia_site, and I'll open mine in TextWrangler, but you can use whatever text editor you prefer. Let's save this file as pt_serif_tk, because it uses a Typekit font, _site, and you can save it in your original city site folder, because we won't be rewriting any other files.
Now, let's take a look at this in the browser. You can right-click, and we can see that it's still using Georgia. What we need to do is we need to add the PT Serif to this file by going into WebKit, and applying the WebKit font to our page. So I'm going to go through this quickly. If you're just joining us, or if you need a more detailed reminder of how to do these steps, I recommend you review the appropriate videos in the Venetian Fonts chapter of the course.
First, let's go to typekit.com, and if you're not already logged in, make sure you do so. Make sure you're using the Choosing and Using Web Fonts Kit, and then find pt serif, add it to the kit, and you can see we've already got Calluna in here, but that's okay, because in a trial kit, you can have up to two fonts, so we can keep that in here, and it will still work. PT Serif has Regular, Italic, Bold and Bold Italic.
We're going to keep all four of those, and we can see down here that our Kit Size is fine. It's smaller than the maximum recommended 400K. Now let's go ahead and publish the site. A reminder that the kit will not work until you've clicked Publish. While we're here, we'll grab our embed code, copy, and we need to put that embed code in our HTML document as the first item in the head. Now we need to tell the browsers that we want to use PT Serif in the site.
We can see here under font family that we're currently still using Georgia. Back in Typekit, under Using fonts in CSS, we can highlight and copy PT Serif, and add that to our font family with a Comma, so if for any reason PT Serif doesn't work, Georgia will load. Save that, and now we need to put it on the server, because Typekit fonts do not work unless they are on a server. My FTP software is already open, so I can grab my PT Serif file and drag it over to my server.
And then back in the browser, you'll need to go to your domain name, and find your file, and we're all set. We've got a new site for Springfield, Rhode Island set in PT Serif. Keep this HTML file. We'll keep using it in 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.