Start learning with our library of video tutorials taught by experts. Get started

Web Fonts First Look
Illustration by John Hersey

CSS Fonts Module specification


From:

Web Fonts First Look

with James Williamson

Video: CSS Fonts Module specification

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Web Fonts First Look
3h 23m Appropriate for all Jan 12, 2011 Updated Dec 13, 2011

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.

Topics include:
  • What are web fonts?
  • Understanding the font stack
  • Using @font-face
  • Rendering basics
  • Choosing a font hosting service
  • Downloading licensed fonts
  • Generating web fonts
  • Font sizing
  • Transforming text
  • Creating special effects with text shadows
Subjects:
Web Web Fonts
Author:
James Williamson

CSS Fonts Module specification

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.


Expand all | Collapse all
Please wait...
Q: This course was updated on 12/13/2011. Can you tell me what's changed?
A: The movie "@font-face syntax update" was added, which explains changes to @font-face in HTML5.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Fonts First Look.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

Web Fonts First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion. For updated training, check out Choosing and Using Web Fonts in the lynda.com Online Training Library.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked