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.
One of the most confusing aspects of using web fonts is dealing with the multiple font formats that are currently required to achieve cross browser results. Knowing which browser supports specific font formats and understanding those formats is an important part of adding web font to your projects. In terms of simply supporting @font-face, Safari has supported it since Version 3.1, Chrome since Version 4, Opera since Version 10 and above, Firefox since Version 3.5 and in Internet Explorer since Version 4. Seriously, since Version 4.
Okay, so what about font formats? Well let's take that a browser at a time. A Chrome has supported True Type, Open Type, SVG and SVGz since Version 4. Support for the WOFF format was added in version 6. Internet Explorer has supported the use EOT fonts since Version 4. Now currently the beta release of IE 9 has added support for the WOFF format as well. Firefox has supported True Type and Open type since Version 3.5.
Support for the WOFF format was added in Version 3.6 and higher. Opera has supported True Type, Open Type, SVG and SVG since Version 10. No support has been added for WOFF yet, but since Opera was one of the submitting groups for the WOFF standard, support should be just a matter of time. Safari has supported True Type, Open Type, SVG and SVGz since Version 3.1. WOFF support is rumored but it's not a reality as of this recording.
It's worth noting here aw well that iPhone and iPad support True Type, SVG, and SVG fonts as of IOS 4.2. Prior to that it was only SVG and SVGz. Okay, so that gives us some insight into the browsers support that various font formats currently enjoy, but it doesn't tell us the entire story. Why are there so many formats supported and why do we need them? Well, you're probably familiar with font formats such as Open Type or True Type.
Now those have been around for years and if you're familiar with print design at all, chances are you've used them over and over again. Many people feel like that could be great if we could just go ahead and use those formats moving forward and not have to worry about the creation or support of new ones. Well, there's a few problems with this approach. First, most True Type and Open Type font in user agreements don't allow for online distribution. Now second, they are really large and using multiple fonts could be an unnecessary strain on your server.
With that in mind, let's take a look at three font formats designed specifically for use on the web. SVG or Scalable Vector Graphics is an XML language used to create vector graphics within a rendering device and was first published by the W3C in 1999. SVG fonts are part of the standard and allow users to define fonts in the SVG format. SVG fonts have the advantage of being delivered in a display only environment. They're small in size and they look consistent across supported browsers.
However they do lack the ability to contain font hinting, which can hurt the rendering of certain fonts. Browser support for SVG fonts isn't universal either, although they are a very popular format for mobile devices and in fact are one of the only web fonts that would currently work only on the iPhone or iPad. You might also hear an occasional reference to SVGz fonts. This is a compressed version of the SVG font format. EOT, which is short for Embedded Open Type, is a proprietary font format developed by Microsoft way back in 1997.
These fonts are essentially True Type fonts that go through around the sub-setting and compression. Now this makes them much smaller and optimized for web usage. The format also has properties that allow fonts to be bound to a specific webpage, which has been described by many as a type of DRM. Although only supported by Internet Explorer, it was submitted to the W3C in 2008 as a standard but was ultimately rejected in favor of the WOFF format. Now WOFF or Web Open Font Format was developed in 2009 as a collaboration between Mozilla and several font foundries.
Originally called Web OTF, it was revised, renamed to WOFF, and then jointly submitted by Mozilla, Microsoft, and Opera to the W3C. The new standard was adopted with the first working draft published in July of 2010. Now if you would like, you can view the official specification on the W3C site. Now as of this recording, the WOFF specification isn't last call. By adopting it as a standard, the W3C is hoping that WOFF will be embraced by all browsers and become the single interoperable font format for web fonts. So what is WOFF? Well, first off it is not a font format in the standard sense.
it's actually a lightweight wrapper that contains True Type, Open Type or Open Font formats. The WOFF format compresses the fonts and includes XML-based metadata that allows you to see where the font came from. The ability to embed this metadata has led to the format being supported by a large number of foundries and font designers. I hope this provides a bit of clarity surrounding the multiple font formats and varying support found within browsers. Keep in mind that the adoption of web fonts is still in the early stages and as standards are finalized and adopted, we will see this landscape become much more stable.
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.