Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
It is long been the dream of many a web designer to use fonts on their websites, other than the basic system fonts that we've been using since the early 1990s... I know. Although it's been a long journey, we seem to have finally reached that point with CSS3 and the use of web fonts. So what are web fonts? Well, it's a broad term that generally applies to the use of the CSS3 @font-face technique. @font-face allows you to specify a font that you want to display on your site.
The browser will then download the font and display it wherever it's used. This allows us to stop using the clunky workarounds we have used in the past and focus on our design. Now I'm sure you're interested in how @font-face works and we will get to the syntax and usage of it in our next movie. Right now, I want to focus on a brief history of @font-face and some of the issues still surrounding it. @font-face was actually part of the original CSS2 specification, but it was removed from the 2.1 spec due to implementation concerns.
Serious issues with online font licensing prevented widespread adoption in browsers and are still one of the major hurdles of @font-face today. The main problem with @font-face is how fonts they are delivered to the browser. In the default implementation you would reference a font resource posted online and the browser would download and then display the font. Now this means that the font is essentially naked. Meaning anyone could find the resource URL and download the font for their own personal use, and as you can imagine font foundries were not amused at the thought of their fonts being hosted online, with nothing to keep people from downloading and using their fonts without paying for a license.
Thankfully many organizations and individuals have been hard at work to enable web fonts while still protecting the integrity of the fonts themselves. Over the past several years we've seen a dramatic rise in online font hosting services, the development of several web specific font formats, and a rise in open-source online fonts. These and other dedicated solutions are making the usage of web fonts practical and leading to widespread adoption.
They're also one of the reasons we've seen @font-face reintroduced in the CSS Fonts Level 3 module. Let's talk for just a minute about online font formats. Although, most browsers offer support for common types like OpenType and TrueType, I want to take a moment to discuss two font formats designed for online usage. Embedded Open Type or EOTs and in the Web Open Font Format or WOFF, are the two formats supported by browsers that have been designed specifically for online usage.
Microsoft developed EOTs to add in support for the format in Internet Explorer 4 in 1997, making it the first font format designed for online usage. Now currently, it's only supported by Internet Explorer and it remains a format you need to account for if you want to use web fonts now. The WOFF format is one that holds great promise in the arena of online font usage. It's relatively new, developed in 2009 by a collaboration of type designers and Mozilla.
But it's rapidly gained support as an open standard for the web. The W3C has accepted it as a working draft and Apple, Google, Microsoft, Mozilla, Opera, and perhaps most importantly multiple font foundries have thrown their support behind the format as well. It's highly likely that this file format will become the standard format across multiple browsers and devices. So what's the point of using a font format designed for online usage rather than just using available TrueType or OpenType fonts? Well, licensing for one. Most end- user agreements involving TrueType and OpenType fonts don't allow for online distribution.
The second is size. The WOFF format features a compression ratio that can result in font sizes up to 40% of their own compressed size. And this can make a dramatic improvement in the performance of sites utilizing web fonts, and we are almost ready to explore how @font-face works, but before we do that I want to discuss some of the online alternatives to hosting the fonts yourself. Now there's nothing wrong with hosting it yourself. Just be absolutely sure that you're within your rights as a license holder to do so.
Another way of adding web fonts to your sites is to use one of the growing numbers of online hosted services. These services take away the worries of hosting the fonts yourself and offer a variety of plans to suit your needs. Most services offer subscription-based plans. Large font libraries to choose from and code generation designed to make integrating the fonts in your site quick and painless. A few of the more popular services are Typekit, Font Squirrel, Fonts Live and Web Ink.
Now other services such as Kernest offer alternate ways to purchase or enable web fonts. I am a big fan of Typekit's pricing and plans and Font Squirrel's features. In fact, we will be using Font Squirrel a little bit later on in this title. Before setting on any specific service, I recommend taking advantage of their free or trial periods to determine which solution is right for you. One more thing. @font-face is not the only way to enable non-system fonts for your sites.
There are several tried- and-true methods out there. Such as CSS image replacement techniques, and services like Cufon and sIFR. But most of those alternative methods require somewhat complex code workarounds and occasionally used third-party plug-ins like Flash to display fonts. Google has recently launched a Google Font Directory, an open source font repository that uses Google's proprietary font API to display fonts within your website.
As an alternative to @font-face, I recommend checking it out. Now that we've taken a look at a general overview of web fonts, let's take a closer look at how they work, as we explore the syntax for @font-face in our next movie.
Find answers to the most frequently asked questions about CSS3 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.