Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
If you really want to understand how web fonts work, one of the best places to go is to the specification itself. @font-face, the mechanism behind web fonts can be found in the CSS Fonts Module Level 3 specification, which I am going to refer to as the Fonts Module to save some time. If you want to see the latest version of the Fonts Module, I recommend heading over to the CSS current work page on the W3C's site. There you'll find a summary of the current work on the Fonts Module.
And I am just going to scroll down to find the Fonts Module, there it is right there. So I am going to go ahead and click on that. That's going to give us a summary of the current work on the module. It's also going to give us a timetable for past versions of the specification and for upcoming ones. You will notice the upcoming status will be last call and they don't have a proposed date on that. If you click on one of these status updates, it'll take you to the specification itself. I am just going to go ahead and flip over to that. So here we are at the CSS Fonts Module Level 3. Now you will notice that I'm looking at the W3C Working Draft as of the 18th of June 2009.
If you're ever looking at a specification, you have got a little list right here underneath it that says this is the current version you are looking at. This is the latest version and this is the latest editor's draft. You might actually be looking at the latest version. You can look at that or you can look at editor's draft. The editor's draft is not going to be the current specification. It is going to be the one that they are currently working on. There might be some differences between those two but you can also use these links to go back to previous versions as well if you want to see how they're evolving over time.
Within the specification, in addition to looking at the current status of the document, I am going to scroll down a little bit. We can see an abstract. It tells us exactly kind of what's going on here, what the current status of the document is or at least this document that we are currently reading, and then we have a nice table of contents. At the very top of the specification, we get a little background into typography and some of the specific challenges that we have on the web dealing with typography. If we don't want to read all of that, I will just scroll right back up here.
You can jump right in and start taking a look at the properties and the syntax in the specification for those properties. Okay, look. I admit, specifications can be dry and pretty boring. So as a designer, what exactly do you gain from reading these things? Well, for one thing, you are going to be reading the exact same specification that the browser developers are reading when they implement the features into their browsers. So this is extremely helpful. This allows you to compare what's actually in the specification to what the current implementations are inside the browsers, because they're not always exactly the same.
This gives you a really nice baseline of how successful the specification is at the moment in terms of its implementations, and how some of the browser implementations are likely to evolve or change in the future. Now it can also help us learn some little details about how a feature is supposed to work that we might not know otherwise. Let me show you what I mean. So I am going to go back up to the table contents here. It's the quickest and easiest way to find my way around the document. And just go real fast here, here we go. And I'm going to go down to the Font resource section where we can find the @font-face rule.
I am just going to click on down to that. Now in this section, if I scroll down, I can see some sample syntax of the @font-face rule and what the specification says is the proper syntax for it. You can always pick up little things here. Let me show you what I mean. If I scroll down and find the source descriptor, one of the things that I can see by looking at this value is that at the source value, you can actually take more than one value. Now I know this might not be the easiest thing in the world to sort of parse but if you scroll down a little bit, you can see an example of them doing just that, passing more than one value in for the URL.
Now if I had just studied some of tutorials online, I might not know that that's possible. So coming here and reading specification would let me know that hey that is an option and if I'm having trouble serving fonts one way, that is another way to do it. In fact later on, when we talk about Paul Irish's bullet proof @font-face syntax, this is some of the syntax that Paul uses and he certainly wouldn't have known about it, if he didn't come in and read the specification. Now often, the specifications will also have some pretty helpful suggestions on ways that you can use syntax to your advantage as a designer or as a developer.
Let me show you what I mean by that. I am going to scroll down to the unicode-range area. So here we have the description of what's the unicode-range descriptor is. This basically just is a way of telling your browser which range of characters to bring in for that specific font. If I scroll down a little bit into some of the sample code, for example the specification discusses how it's possible to use multiple declarations of the same font, but with different unicode ranges to a basically effectively mainly subset of font.
So you're just bringing in only the characters that you need, you can see that sample code right here. That's a pretty darn cool trick. So again, that's something that we are picking up from the specification. Now I also love the fact that the folks that are writing these standards, they do their best job to sort of explain their rationale for why they have made certain decisions. This can help you understand the logic behind these rules because sometimes it's not always quite clear as to why a standard has a certain rule in it. And it can also help prepare you for some of those things that could cause the problems a little bit later on.
So if I scroll down a little bit further in our specification, I can see I have a few appendixes down here and in this one, Appendix A: Mapping font features to CSS properties, I've found some pretty useful information here. For example, we notice that there is a line here that says, "Font family names for TrueType and OpenType fonts are contained in the 'name' table. Multiple names can be stored for different locales but Microsoft recommends fonts always include at least a US English version of the name." Okay. Now if we keep reading, we notice that in Windows the family name can only be used for a maximum of four faces.
That's actually going to cause a problem that we are going to run into a little later in this title. If you try to assign the same font name to more than four variations of the font, say a Display, a Bold, a Black, a Light version, you are going to run into problems in Internet Explorer trying to access those using multiple font family declarations. So you'll need to find a way just sort of get around that. So if you hadn't picked that up from the specification, you'd be sort of banging your head against the wall as to why that's happened, but coming in here and reading through this gives you understanding of why this is a problem and it's really not something that's wrong with the specification itself.
So understanding any aspect of web design thoroughly takes a commitment to spending the time necessary to learn not only how something works, but the why behind it all. Taking an hour or two to read through the latest W3 specification is a great way to get started doing just that.
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.