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

Web Fonts First Look
Illustration by John Hersey

Web font support detection


From:

Web Fonts First Look

with James Williamson

Video: Web font support detection

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.

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

Web font support detection

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.

Whatever fallback method you choose one of the best ways to detect for web font support is to use the Modernizr Library and here we are at Modernizr.com. This is a free JavaScript library created by Faruk Ates and Paul Irish. You can find it again here at Modernizr.com. Now the way it works is extremely simple. We just add a class attribute to the HTML tag, link to the JavaScript file, and it's ready to go. So we add a no-JS class to the HTML tag and if JavaScript isn't supported that is the thing you can test for. If it is supported, basically Modernizr goes through and looks to browser and detects support for all of these different items.

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.

So let's go back into our HTML file. So I have the index.html, opened from the 04_09 Exercise Files folder, and I just need to add a script tag for my Modernizr Library. Our Exercise Files does have the Modernizr 1.6 version or the minified version included in the Exercise Files but I encourage you to go out and download the latest version because you never know when they're going to be updating it so go out check the site out and if they have a more recent version you got to want to download that. So I am just going to add a script tag and I am just going to go ahead and do type="text/javascript".

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.

That way if the browser that's viewing the site doesn't have JavaScript turned on, you can at least check of this class. As soon as it detects JavaScript support it's going to erase that class and all of those other classes to it, based upon the support of the browser. All right, I am going to scroll down to the very bottom of the code and you can see that we have added this little div tag down here, this ugly little div tag you saw earlier called no support. You can see that I didn't really waste any time styling that. I just basically did this really ugly default red text. I mean, let's face it. If they are not using a web standards compliant browser, we are trying to encourage them to something a little bit better.

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.

It's about, I think, 50 milliseconds. If you're a really good at JavaScript geek you can go into the library and customize that value if you would like. So there are a one or two performance issues but it doesn't add a lot of overhead to it. So I certainly encourage you to add Modernizr to your site it help detect for these features because it makes presenting fallback content on older or non-supporting browsers a lot easier. So, download Modernizr and give it a try in your own projects.

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