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.
In this chapter we're going to take a more involved look at using web fonts and integrating them into a larger project. I wanted to design something around the subject that would allow for a good deal of creative explorations and something that was well, quite frankly, fun. Now that's why I based our project on Alice in Wonderland. It's one of my favorite books and it's something that lately I've been reading to my girls before bed. So it was on my mind and it fit perfectly. Currently, we're looking at the page with all the styles turned off.
Now if we browse the source we can see it's just a simple HTML5 page with a little extra markup. You can see some extra divs here and there added for structuring the visual elements. Well, I'm going to go back and I'm going to turn these styles on. As soon as we turn the styles on, you can see our web fonts come to life. Now the things in the past that would have required a lot of workarounds, like this main heading, are now possible to do with web fonts. That's just pure text. Now as you browse throughout the page, you'll notice some stylistic editions like shadows and use of multiple columns as you can see here.
We're going to use some of the latest CSS3 techniques to help us achieve some of this styling. So now that we've seen what we're going to build, it's time to start building it. I want to say upfront that we'll not be building this page from scratch in this chapter. The focus of the chapter is on using the web fonts that we've enabled in the previous chapter and on using CSS to enhance the typography of the page. Because of this the exercises will feature files that have been partially completed. Of course, the finished files do contain all HTML and the CSS necessary to complete the project.
So if there's an area within the page that you're interested in that's not addressed in one of the exercises, feel free to take the code and break it down and see on your own how the effect was achieved. This is also a really good time to mention that I am building a companion site for the course. For more information on the Alice in Web Fonts project, how it was built, and how to participate in it, go to www.aliceinwebfonts.com.
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.