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.
Since we've talked about them so much, I think it's fair to ask the question, what are web fonts? Now, in the narrow sense, web fonts are the preferred way of describing font files that are embedded in web pages using the @font-face technique. In a broader sense, web fonts refer to any technology that allows the automatic downloading and temporary installation of fonts and the client. It encompasses not only the @font-face rule but the SVG font-face element as well. If you're looking for little history, check out the Wayback Machine's archive version of Paul Haeberli's WebFonts Proposal.
It was released in 1995 and it's the first mention that I found online of the term web font, relating to the process of downloading font resources for the browser. While Paul's proposal wasn't adopted, it planted the seeds of what would become our current implementation. Given this context, I can understand the term web-fonts sounds really like nothing more than exercise in semantics. So the font is being served to the browser. How does that make it any different than in the other fonts I might use? Well, to understand that, let's take a look at some of the problems that prevented their early adoption.
One of the biggest issues with the adoption of web fonts dealt with the end user license agreements for most font vendors. The majority of these agreements contain a clause that prevents users from distributing the fonts without prior approval. The simple mechanics of that font face would put most designers in violation of those agreements. For the most part, font founders weren't crazy about the idea of having browsers and possibly users download their files without permission either. Combined those concerns with the increased overhead of downloading large fonts, and the specific needs of on-screen font rendering and you can see why web fonts require their own specific approach to designing fonts.
This has led to the development of new font formats designed to reduce file size and make the fonts themselves more secure. Font formats such as Embedded OpenType, the early format developed by Microsoft, and the new WOFF format are designed to compress fonts and optimize them for on-screen usage. We'll examine those and other formats in more detail a little bit later on. It's also important to note that font foundries and font designers have been instrumental in the adoption of web fonts.
In addition to working with the W3C and browser manufacturers in developing new formats, they have begun to design or modify existing fonts specifically for use on the web. Reduced glyph sets, auto-hitting fonts to assist with screen rendering, and new licenses designed to allow usage with @font-face are just a few of the ways that fonts are being redesigned entirely for the web. As you can see the process of giving web designers more choices when choosing fonts for the web isn't as simple as it first sounds.
I think it's important to remember that whenever an implementation as complex as web fonts is tackled, there are a lot of dedicated people and organizations working hard behind the scenes to solve issues that arise in a way that works for everyone. Thanks to their efforts. We're well on our way to making web fonts an integral part of the web design process.
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.