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.
One of the things you have to deal with when using any emerging technology is the lack of support in older browsers. While many techniques have fallback methods to force rendering in older browsers, web fonts either work or they don't. So having a strategy in place for how your text should render if web fonts aren't supported is a very important. Usually, designers will either choose to fallback around the standard system fonts or to fallback to one of the alternate techniques described earlier in the titles such as cufon or sifr.
Now if you are seeing a checkmark, here it means that the browser currently supports it. So if it gives support for that item it says "Okay, I support this." If it doesn't it appends a class to the HTML tag that says no on this. Let me show you what I mean. So if I go to the documentation on it, we are obviously interested in font-face. So I am going to go and say all right, let's take a look at @font-face. So if it finds support for font-face it is going to add this class to the HTML tag. If it finds that the browser doesn't support @font-face it's going to add this class to the HTML tag.
That means that we can write our selectors to do one thing if the browser supports it and yet another thing if the browser doesn't support it. So this is a really cool, very easy way of detecting for support for web fonts. So let's go ahead and switch back to our Alice in Web Fonts project and finish it out by detecting whether or not a browser supports web fonts. Let me show you what it would like if a browser didn't support it. I am going to switch over to Alice in Web Fonts and what we are doing here is we're adding this div tag that basically says "It appears that you are using a browser that doesn't support @font-face.
To you view Alice in Web Fonts as intended, please view it on a browser that supports web standards. Thank you." If I were really serious about this I'd probably want to provide fallback methodology or put Cufon or Sifr in this site. Or do an alternate layout that doesn't require web fonts. But in this case we are really highlighting and showcasing web fonts. So more than anything I just want to pass along a little message that says the browser you've got really isn't allowing you to see this the way that you want it. Right now, this is exactly what somebody that would even support web fonts would see because I just have the visibility of this turned on. We're going to use Modernizr to hide this basically, only show it in case a browser doesn't support web fonts.
There we go and for source I am going to make that equal to _scripts/modernizr. And you really have to learn how to spell Modernizr because they lack vowel there at the end. -1.6.min minified .js. I am going to close that and then close my script tag. So that's going to enable Modernizr on our site and the next thing I have to do is to go up to HTML tag and essentially apply that class of no-js to it.
So I am going to switch over to my main. css and here around line 66 or so, here we go, we can see that here is our @font-face support message, Div no support. There is the selector in all its ugly glory. Now, what I am going to do is I am going to change this. I am going to change it so that in front this it says .no-fontface. Now remember, we got that from our Modernizr site. I am going to switch back over there so you can see what I am talking about. We are checking for no font-face being added to our HTML tag because if it detects that the browser doesn't support font-face ,that's the class it's going to add to the HTML tag.
So we are basically saying that hey, if you find this class, go ahead and show this. That means that we also need to hide it. So I am going to copy this div# noSupport, go down below that, and then just basically say display of none. That'll be the default view and so if the browser supports web standards and supports @font-face, then that won't be visible. If no font-face is found then it will turn it on for us. So I am going to save this and I need to upload both the CSS file and the index file to my server.
And then I'll go back into my browser, refresh, and that really, really ugly message is gone and we are left with beautiful web font in CSS3 goodness. Awesome! So, Modernizr is a great little tool. It is really quick, it is really easy- to-use and it only requires the addition of a few class selectors to your file, based on what you're detecting for. And there are a few performance issues when using WebKit browsers that I need to mention to you. WebKit does an asynchronous loading of web fonts so Modernizr has a little bit of a delay built into it.
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.