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 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.
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.