Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
For this installment of the First Look series, James Williamson reviews the current implementation and future direction of web fonts: downloadable font resources that can be retrieved with the CSS @font-face declaration. The course begins with the evolution of online typography and current CSS font capabilities, and then dives into the W3C CSS Fonts Module specification, showing how to utilize web fonts, ensure cross-browser consistency, and how to use CSS3 to enhance the styling of web fonts. Font hosting services and tools such as TypeKit and the Google Fonts API are demonstrated. Exercise files accompany the course.
In the previous movie we created an account with Typekit and built a sample kit as the first step towards using Typekit's fonts on our pages. In this movie we are going to take the next step by adding Typekit's code to our site and then adding the Typekit fonts to our font family definitions. So I'm out at TypeKit again, you'll I have logged in and I want to make sure I am choosing the right type kit so I am choosing Alice in Web Fonts TypeKit that I have created in the last movie and I am going to open up the Kit Editor. So once you have a kit you don't need to keep browsing for fonts, you can just open that kit back up any time that you want.
I want to turn our attention over here to the upper left-hand corner. When you click on a font, you can see that the selectors change a little bit. There are basically three ways to reference TypeKit fonts in your code and I want to talk about those. The first is that you can just use this class that they provide. So anytime I want to use League Gothic I could simply apply the class .tk-league-gothic to that particular element in my CSS. Same thing for calluna, .tk.calluna.
Another way to do this would be to go ahead and enter a custom selector so if I select League Gothic and I go up to my selectors and I type in .quote, so that would be the class quote if it was applied an element on my page, I can now add that and you can see that's edit over here to my selectors. You can add IDs, you can add classes, you can add descendent selectors. So you're not limited to classes, you can use really any selector that you're using. So I mean you can just say a paragraph, you can just say P, and then every single paragraph in our document will be League Gothic, but which wouldn't look so well but it would be very effective in terms of deploying it.
So that's another way to this, as you enter in your custom selectors, you can use the selectors they have got and there is yet another way. If I click Advanced I can see that I can actually just use the font family declaration of any selector to pass in these two values. League Gothic1 and League Gothic2. So why 2 font face declarations? Well one of the ways that TypeKit helps protect fonts is to split them into two separate documents and then reassemble them at runtime. So by going ahead and requesting League Gothic 1 and League Gothic 2 we are making sure that we are getting the whole font set and that it served properly.
So that's something that you are going to have to remember right down, take some notes, so that you can use those in your styles later on if you want to access your fonts this way. So really you have three different flavors and which ever one you feel the most comfort with is what you can use but we're going to do all the above. So I am going ahead and close that and the same is true for Calluna. If I click on Advanced I can see that there is calluna-1 and calluna-2 as well. I could go back and start referencing these in my page but unless I have the scripts at the top of my page that hook into TypeKit service I am really not going to get anything.
So one of the first things I want to do is click on the embed code link up here. And so you can access this code in any time. You can do it at the beginning of the process when you build a new kit or at any point in the life of the kit, you can go and grab this code out. Yours will be slightly different then mine. You are going to have another unique identifier and notice that if you're using a plug-in or a service like WordPress plug-in that hooked in the type kit you are going to look for that particular identifier and that's which you are going to pass in. So I am going ahead and copy this code and then I need to switch over to my code editor and the other page that we are working on.
So I have open the TypeKit.htm and you can find that in the 03_06 Exercise files folder and the first thing I want to do is take the embed code that we copied from the TypeKit editor and paste it into the head of my document. Now that's going to enable the TypeKit service for this particular page, so we need to do that for every page that we want to use our type kit fonts on. So I am going ahead and save that and the next thing I am going to do is just take a look to page for a moment. So I am going to switch over to Design view and you see that I have a few headlines here. I have a H-1 and H-2, and I have some body copy and a quote down here as well.
So speaking of that quote, I am going to switchover to Code view, scroll down through my code until I find this p. Notice that that paragraph already has the class quote applied to it, so in this case we don't need to do anything extra because we added that selector into our TypeKit kit. League Gothic should be applied to that automatically. Now for that heading 2 I am going ahead and apply a class here and I am going to use their tk-league-gothic class.
That's the one that there was through the default class already supplied by TypeKit. I am going ahead and use that here because I want Alice continues her fall to be in League Gothic. So that's another way to request those fonts on the page. The third and final way-- I am going to scroll up. I'll notice that I have some CSS already written here and we are just using some really basic default font stacks that use system fonts. I am going to change that and for h1 I am going to type in league-gothic-1. That's in quotation marks and then comma and then league-gothic-2 and then another quotation mark.
Make sure your semicolon is closed there. Now again remember we have to go ahead and pass both of these, the League Gothic-1 and League Gothic-2, since Typekit splits your fonts into two separate files and then reassembles them on run time. Let's do the same thing for calluna. We will do calluna-1, caluuna-2. Perfect. All right I go ahead and save that. Now I almost ready to upload this, but notice that we are not placing any other fallback fonts in this particular stack. Remember that's something we can do in the kit itself so if you want to provide fallback fonts you can do that in the kit and here all you need is this particular declaration for your font family declarations.
I am going to open up my FTP client, connect to my remote server, and then I am going to grab the file we have being working on and go ahead and put that on my remote server. As soon as it's uploaded, I am going to switchover to my browser and browse to my Aliceinwebfonts.com/TypeKit.htm. So you are going to need to know the address, obviously, of the domain of your own domain so that you can preview this. I noticed that my headline Alice in Web Fonts is in League Gothic. We are using Calluna there for the body copy. The h2, remember it's picking up the font based on the supplied selector from type kit and then our paragraph that has a class of quote applied to it. It is also getting League Gothic and remember that is being served because we added the class of quote to our selectors in the type kit as well.
So you know, using TypeKit as you see it's fairly simple. I'm a really big fan of how it gives you all these multiple options for how to define font usage on your pages, you know how you want access those fonts. Now most subscription base hosting services work in a similar fashion so if you're comfortable using TypeKit in this manner, you'll probably find the other hosting services easy-to-use as well.
Find answers to the most frequently asked questions about Web Fonts First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.