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.
I hope you have enjoyed Web Fonts First Look. The emergence of web fonts is another step towards having the design freedom for the web that is long eluded us. Keep in mind that the implementations and standards behind web fonts are still evolving. So don't be surprised if one or two things changed from the time that this course was recorded to the time that you watch it. However as we have seen, unlike other aspects of CSS3, web fonts can be used right now. It only requires moderate tweaks to enable them consistently in all modern browsers.
Before I close I'd like to leave you with some additional resources that will give you additional information about web fonts and assist you with bringing them to your own sites. First off I want to point out two sites that can help you when making decisions about web fonts. I showed you the @font-face face off earlier, but I want to mention it again. If you're looking for a font hosting company this page can help you make quick comparisons and get an idea of which services might be right for you. whencaniuse.com is a site that tracks browser support for CSS, HTML5, and a host of other technologies.
You can see which versions of which browsers and mobile devices support @font-face and learn more about their level of support. Type-a-file is an interesting resource that can help speed up your CSS development. The idea behind Type-a-file is to give you a prebuilt CSS Style sheet that adheres to typographic best practices. You simply choose a flavor from the pull-down menu, download the resulting CSS file, and plug it into your site. For more information on web fonts I recommend Web fonts.info.
This wiki style site is filled with articles, demos, and coding samples. It's a great place to start and a great resource to keep coming back to. One of the best blogs out there that focuses on web type is a Nice Web Type by Tim Brown of Typekit. Tim writes some incredibly informative articles, posts demos, and occasionally will point you to free high-quality fonts that you can download. Another of my favorite type blogs is I Love typography.
The blog is exactly what it sounds like. It's a place where people who love typography right articles, post reviews, and features fonts. While not specifically focused on web fonts, it's still an essential resource for anyone interested in typography. Now one article that I highly recommend that you read is an article on font hinting by Peter Bil'ak on Typotheque's website. This article does an amazing job of describing what type hinting is, why it's necessary and why finding quality fonts is important for on-screen rendering.
I also recommend for further reading Paul Irish's @font-face gotchas as well as the rest of a site to be honest. Now I don't know anyone who spends as much time researching how to make things work across different browsers and platforms than Paul. Here he lists some of the small but important details of @font-face implementations. it's a must-read for any web designer that uses qeb fonts. Finally I want to give you a couple of links that you can use to go out and get some free high-quality fonts that you can use for your sites. Font Squirrel and The League of Movable Type are two resources that we've already is in this title, but they bear repeating as sources of fantastic fonts.
Dafont features over 11,000 free fonts that you can download and use. Although the quality of the fonts varies, you can find some excellent fonts here for your projects. If you do decide to download free fonts, always remember to read the license carefully to make sure you're using it within the set permissions. Well that's all for now,. Have fun working with web fonts and I hope that they open up your web designs to an entirely new level of creativity. For more information on web typography, CSS, and what the new standards mean to web and mobile development, be sure to check out the rest of web design and development based titles in the lynda.com Online Training library.
Thanks for watching and I will see you again soon in my next course.
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.