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.
As we've seen there are a large number of font hosting companies available to you that provide a wide array of services. To help introduce you to working with a font hosting company, we are going to work with Typekit, one of the most popular hosting services available. Now, I encourage you to try out as many font hosting options as possible before deciding on which one to use. I chose Typekit for this title based on their market presence, their toolset, and their ease-of-use. So it's very representative of really any of the type font hosting services that you might try out.
So here we are at typekit.com and the first thing I want to do is sign up for a trial account and I can either go right over here to Register or you'll notice that very helpful Try it for Free link right there on the homepage. So I am going to click on that. Now, this gives me a listing of all the available plans and some of their limitations. So, for example, for the free trial I see that I have a limited number of Pageviews per month. I have access to simply the Trial Library, so probably not the full library access. It's only available for one web site, and I can only use two fonts per site.
So that's really very much a sort of kick the tires on it, try it out, see if you like a type of service, rather than try the whole thing free for 30 days. And really all the services have a slightly different flavor on their trial account. So you'll have to figure out which one sort of fits you. Now, you'll notice that there are other pricing options available. So feel free to sign up for one of those if you think that Typekit is the right service for you. So I am going to go ahead and sign up for this. So here if you are going to sign up for a trial account you're going to provide them with name, email, and password.
Obviously, you're going to have to agree with the terms of service, and as soon as you do that, it's going to go ahead and create an account for you. Since I already have an account, I am going to go ahead and log into that. You guys go ahead and create your own Typekit account here. As soon as you create it, you'll be logged in as well, and we'll meet back at Typekit after we've both logged in. So if you are still on landing page for creating a new account, just click back to the homepage so you can get right back here. You should still be logged-in. You should see your name right here when you log in or out. Now, you'll notice that I've got a few Typekits already built so I can switch between my active kits or I can build a new one.
I want to go ahead and build a new kit. So the first thing we want to do is go ahead and build a new kit. Kits are how we basically assign groupings of fonts to different web sites. We can say okay, we want these fonts together on one kit and then we are going to apply them to these particular domains, and that can change based upon your account level. So certain accounts are restricted on the amount of domains that you can have. So because I already have some active kits, I don't see the same link you do. You are going to see a link up here that says Create a Kit. I am going to click on this, and I am just going to add another kit.
So you'll be creating a kit. I am going to be adding another one and we get to the Create a Kit page. Now, you can name this anything you want. I am going to call mine Alice in Web Fonts because that is the project that we're going to be working on, and then I am going to add that domain. I am going to add the www.aliceinwebfonts.com. Now, this needs to be a domain that you have access to and that you have permission to use. So obviously, you're going to need to enter-in your own personal domain here, not the aliceinwebfonts one.
I can go ahead and copy-and-paste this right now or I can do it a little bit later. In this case I am going to do it a little bit later because right now I want to browse for some fonts and add them to my kit. So I am just going to go ahead and click Continue. All right! So I am all set. Now, all I have to do is go and find some fonts. I am going to go ahead and do that. When you're browsing for fonts inside Typekit, you can browse by type such as Serif, Sans-Serif. You can browse by foundry. You can even browse by tag. So poster fonts, display fonts, or you can say okay, I'm looking for headlines or I am looking for body copy.
So they've really done a good job of creating a flexible interface that allows you to search for fonts in just multiple ways. So however you're trying to find something, you're going to probably find an avenue to it here in the Browse Fonts page. I happen to know exactly which fonts we're going to use. Now, it's going to make my life a little bit easier. So the first thing l am going to do is I am going to go to the Search and I am going to type in L. That's going to show me a list of all of the fonts that begin with L and I am just going to go to League Gothic. So League Gothic is the first font that we're going to add to our kit. If you find this through browsing the fonts and clicking it on a list or clicking on tags, eventually you're still going to get to this page.
This is where we're told a little bit more about the font. We can take a look at specimens, we can test the type out, we can go ahead and look at browser samples, so we can see how it's going to render in multiple browsers across multiple platforms. There's a lot of things here that we can take a quick look at. If you've already decided though that this font is what you want to use, you can just click Add to Kit, the little button in the upper right-hand corner, and it's going to add it to what we call the Kit Editor. So this is the Typekit Editor, and it gives us some options in dealing with how these fonts are going to be served to our sites.
Let's add one more font and then we'll come back to this Kit Editor in just a moment. So I am going to close that and I want to find another font and this time I want to find Calluna. You'll notice that Calluna comes in a lot of weights and styles. Whereas League Gothic only has the one variation, Calluna has several. It's got a Light version, it's got a Regular version, a Semi Bold, a Bold, and it even has a Black version. So later on we're going to talk about how to serve up these multiple versions to your web-pages.
All right! So I am going to go ahead and click Add to Kit, and we'll add that one to our kit as well. At this point, I want to go in and change how these fonts are going to be served to my website. So what I am going to do is I am going to go to League Gothic. So I am just going to click that font. I can see that I have a few options over here on the left-hand side. In just a moment, in our next movie, we are going to talk about different ways that we can access the fonts using selectors or CSS in our sites. Right now, I am going to look at sub-setting my characters and then including weights and styles.
So the first thing I want to do is Language Support. Notice I can choose a default character set, which is much smaller than all characters. If you have a question about well, which one is right for me? You can click on these links which say Choose and you get a little bit more information about that. For the time being, we are going to go with the default which is a little bit smaller, and for weights and styles we really only have one. There is another option right down here that I want to check out and this is CSS Stack. I can click on this and I can create my own custom font stack to provide fallback fonts in case that particular browser doesn't support web fonts.
League Gothic is similar to Impact, and Impact is installed on a lot of computers. So, I think I am just going to type in "Impact, sans-serif" to sort of build my own CSS Stack here. So I am going to go ahead and hit Save and I am going to move on to Calluna. When I click on Calluna, again I can see I want the default character set, not all characters, it's much smaller, and then for weights and styles-- And by the way, this is only something that you need to be concerned about if you're serving up multiple languages of it or certain special characters that you need.
So take a look at the character set and figure out exactly sort of what range you need. Do I need all these weights and styles? Probably not. As a matter of fact I know for a fact that we're not going to be using Black. So I am going to go ahead and disable that. So I'll keep the other ones. The Light, Regular, Semi Bold, and Bold and that shaved off another 29K. The smaller your kit is, for the most part the better. It's just going to make your fonts load a little bit quicker and reduce the overhead of your site. I mean that's never a bad thing. So, now I've got two fonts chosen to my kit. League Gothic and Calluna.
My kit size is a total of 212K. I have got two fonts, two selectors, for Alice in Web Fonts. Now, the two selectors we're going to talk about in just a little bit. So don't worry about them right now. You can work in the Typekit Editor all day long but unless you publish it, none of these settings are going to take. So I am going to go right down here to the bottom right-hand corner and I am going to click Publish, so that these options are available in my kit. There we go! So, now that we've signed up with Typekit and we've built our initial kit, we're still going to need to do a couple of things to our site in order to get the fonts working and we're going to tackle that next.
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.