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

Web Fonts First Look
Illustration by John Hersey

@font-face syntax update


From:

Web Fonts First Look

with James Williamson

Video: @font-face syntax update

As I mentioned earlier, if there's one thing that is consistent in web design, it's change. Since the initial recording of Web Fonts First Look, the preferred @font-face syntax has changed significantly. Now rather than just redo all of our previous exercises I thought I would go over the syntax changes with you and explain what is changed and why. And to do that I have opened of the Index.htm file and the main.css file from the 04_10 folder. I've scrolled down here to about line 32 or so in the Main.css file.

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

@font-face syntax update

As I mentioned earlier, if there's one thing that is consistent in web design, it's change. Since the initial recording of Web Fonts First Look, the preferred @font-face syntax has changed significantly. Now rather than just redo all of our previous exercises I thought I would go over the syntax changes with you and explain what is changed and why. And to do that I have opened of the Index.htm file and the main.css file from the 04_10 folder. I've scrolled down here to about line 32 or so in the Main.css file.

Here we have our local @font-face rule and here we're defining the font Junction which we have a system locally and this is a syntax that I'm going to play around and experiment with a bit and show you guys how things have changed. The easiest way for me to do this is to just copy and paste it so we can compare the old syntax and the new syntax. So I'm going to go ahead and highlight the entire rule. So I'm going to go ahead and copy that and paste it just below the original one. Now I want to make sure I know who's who so in the the first one I'm going to type in the old syntax.

I'll go ahead and comment that out so that it's not causing us any problems and I'll do the same thing to the original @font-face rule. I'm going to comment that out as well. So this way we've got the older syntax above us and we can sort of compare and contrast when we are all done with this. So the newer syntax we'll go ahead and get started on that. The differences between the two of them really aren't that great. So we only need to do a couple of tweaks to the syntax. The first thing we're going to do today is we're just going to place a comment right beside our first source declaration here so we know what's happening with this.

I'm just going to type in here "for IE 9 compatible modes." For IE 9 compatible modes. Okay, so what does that mean? I'm going to comment that out, just so that's a comment right beside it. Okay, so what does this mean? Well, what it means is that one of the biggest problems that we have with the older syntax is Internet Explorer can still be really buggy in certain instances. For example Internet Explorer 9 does have compatibility modes that tie back to IE 7 and 8 and it's sort of quirks mode thing, that if we get switched the rendering in IE 9 follows the same rules as the rendering in IE 7 and 8.

So basically this initial source declaration really is only going to work for IE 9, and that's why it's there. And that means in the source declaration below that we need to go ahead and put something in there that's going to help us out with these older versions of Internet Explorer 9 or perhaps if IE 9 gets thrown into some type of a quirks mode we need to give it sort of a fallback if you will. Before we get into doing that however we're going to say goodbye to our local declaration. I hate doing this because I love the smiley face, but this local declaration was always optional in CSS3.

So it was always one of those things that you could put in there if you really wanted to and it really was in there for a completeness more than anything else, to be quite honest with you. The biggest problem is that local caused for us is that which is Android devices, if the local value is found in the source declaration Android devices would go ahead and force the device to download the font every single time somebody visits the site. Obviously that is not what we want to have happen so we are going to get rid of the local declaration for our @font-face syntax.

Again, it is optional. We didn't need to have it in there. We're removing it to fix some of those issues that we had with Android devices. The next and last thing actually that we need to do is go ahead and put a line of syntax in here that's going to help us out with earlier versions of Internet Explorer or perhaps if IE9 gets triggered into quirks mode. The easiest way for me to do this is to simply copy the resource locator just above it in the previous source, because again we're going to be using the embedded OpenType font for earlier versions of IE as well. Notice that I don't have the semicolon highlighted and I've just highlighted the URL, the whole thing.

So I'm going to copy this and just in front of the WOFF format URL I'm going to paste it. Now I have to be really careful when I do this because remember these are are a comma separated list, right? So I'm going to go ahead and type in another comma, just to make sure that we have a comma between each of these guys just as we did before, okay. Fantastic. Now we're not quite done. What we need to do is we need to go ahead and do a little trickeration here eight after the name of the font. So right after the EOT what you'll do for the syntax is you'll type in a question mark and then after that question mark we can put a string of characters and the string characters that most people put is this.

They type in #iefix. Actually it doesn't matter what you type in. You just need a string of characters, but most people do that because it's rather a self-explanatory. It says hey, this is a fix for Internet Explorer. Now just after the closing parentheses but still in front of the comma here, I'm going to go ahead and do another font hint. So I'll type in format and in then inside its parentheses embedded-opentype. And don't forget to close the parentheses.

Again pay attention to the syntax. Make sure your commas are all in the right place, that sort of thing. So hang on a second, what is going on here? Here's the deal. Internet Explorer 6 through 8 had a little bit of a parsing error when it came to dealing with the @font-face rule in the source attribute. See basically what would happen is that they found a comma separated list of values, it would basically return an error and it wouldn't even request the font. That was a big problem. This is a brilliant solution and as far as I know it was arrived at by Ethan Dunham, who I'm going to talk about in just a moment.

But the solution here was to add a question mark, and that question mark basically makes Internet Explorer view this as a query string. So IE views everything past this as a query string to this resource and it basically just ignores it, if you will. All the other browsers are a little smarter than that and they understand the syntax. So when they arrive at the comma, they just keep going through the resources until they find one that they can use. So now the syntax works beautifully.

Now if I save this, I'm going to test that locally just in a couple browsers here. Now I know for the rest of the course we were uploading it to the server but since this is a local resource, I'm just going to test this locally. The rest of our fonts won't look quite right. As you can see those look off, but Junction is looking great. So that's a Firefox. So let's test that in a WebKit browser like Chrome. And again if I scroll down Junction is working just fine. So the new syntax works beautifully. And that's it.

So the syntax isn't a terribly different than what we had before. It is just a little bit cleaner and it works a lot better with Internet Explorer, which was the main problem. For a complete breakdown on the changes to the @font-face syntax check out Ethan Dunham's series of posts on the @ font-face syntax on Font Spring's blog, which you can see here. This is his latest article, "Further Hardening of the Bulletproof Syntax." In a previous one, it broke everything down as well. Now keep in mind that if you're using hosted accounts like Google Web Fonts that we took a look at earlier or TypeKit, you don't need to change anything.

They went ahead and updated that syntax automatically, so you'll need to worry about that. Now if you're using Font Squirrel it's also using the updated syntax as well. Which means that really all you're likely to need to update is any older font resources that you may have deployed and any syntax that you may have written by hand using the older syntax. Now keep in mind that future updates to the syntax are likely as well. So keep an eye on all the resources that I've directed to you in this title ao you can stay current with the latest syntax.

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