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.
We've talked a little about @font-face and what it allows us as designers to do, but I want to discuss the rule in more detail and the mechanics behind how it works. First off, using @font-face is something that we can start doing right now. In fact, there is currently an explosion of sites using @font-face with more being added every day. In that sense @font-face is part of the current state of online typography. It is however still an emerging technique. As we get deeper into this course you'll see how web font licensing, hosting, and browser implementations are still evolving.
So although web fonts are certainly ready to use now, it's a good idea to remind yourself that it is a dynamic and changing area of web design. The overall mechanics of the @ font-face rule are fairly simple. Using the rule in your CSS you define a font-family and supply a link to an external font resource. If the font-family is used in your styles, the browser is prompted to download and install and display the font. Of course, there is a bit more to it than that.
So let's take a closer look at the rule. You can find the @font-face rule outlined in the CSS Fonts Module on the W3C site. Here is what the spec has to say about @font-face. The @font-face rule allows for linking to fonts that are automatically activated when needed. This permits authors to work around the limitation of web-safe fonts, allowing for consistent rendering independent of the fonts available in a given user's environment. All right, well let's walk through the rule to see how this is accomplished.
First, you define a font-family. Now, this is essentially a literal string, which the browser is going to use for font matching. This is the name that you'll refer to in your styles when requesting the font. It's worth noting here that if there is a font naming conflict, this is the resource that the browser will use. So you want to make sure that this name is unique. So here is an @font-face rule with the font-family declaration added to it. Now we're going to come back to it as we add more declarations.
Next, you supply the reference through the use of the source (src) descriptor. This is required and consists of at least one path to the desired font resource. Now, the path is either going to be resolved as a URI or as a local reference if you want to request the font from the client itself. The URI can be an absolute path if the font is host externally or a document relative link if the font is hosted on your web server. It is possible to pass more than one reference, which is very helpful in ensuring your font work across multiple browsers.
Browsers are supposed to loop through the listed resources and use the first resource available that it supports. As with most new implementations, there are varying degrees of support for this. So later on we'll talk about how to properly format this syntax so that it's going to work everywhere. There is one more thing you can add to your source descriptor. Each URI could be followed by a format hint. Format hints consists of a single or comma separated list of well-known font formats. This helps identify the format to browsers and assists them in choosing the font or moving onto the next available resource.
Now, here is a list of some of the more popular format types. We have a TrueType, TrueType ATT, which would indicate that it has Apple's Advanced Typography Tables, OpenType, Embedded OpenType, SVG, and the new format WOFF. Not all browsers support format hinting, most notably Internet Explorer, and they are listed as optional, although as we'll see a bit later you'll be using them for browsers other than Internet Explorer. Let's go back to our @font-face rule and check it out, now that our font resource declaration has been added.
Okay, so far so good, but how about when you're working with a typeface that has multiple styles? For example, if you want to use Adobe Garamond you're probably going to want to use Adobe Garamond Bold and Adobe Garamond Italic at the very least. Now to do that, you're going to use multiple declarations and you're going to use the font-weight and font-style descriptions to identify which resource to use for multiple weights or styles. Now for example, if you want to use Droid Serif, here is an @font-face rule that references the font resource.
However, what if I want to use Droid Serif italic and Droid Serif bold? By adding these two additional @font- face rules that use the same font-family descriptor, so we're using the same name here and then the proper font-weight or font-style descriptor, I'm able to tell the browser to use the proper version of the fonts for bold, italic, and bold-italic. Now when the font is italicized or bolded through the use of CSS or HTML tags the proper font will be used. You can also use the Unicode-range to identify the range of characters supported by a given font.
Now this is very helpful when working with multiple languages, although the value is optional. Now here for example, you'd be downloading the basic Latin characters as well as range of symbols. So that's kind of a brief description of the @font-face rule and how it works. Throughout this course, we'll be referencing @font-face and going into additional detail on some of these specific aspects. As we get into our Exercise Files we're going to revisit this syntax and discuss how to optimize it for cross-browser compatibility.
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.