Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 47314 Viewers
117 Video lessons · 34263 Viewers
113 Video lessons · 80255 Viewers
116 Video lessons · 70179 Viewers