Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
Another option for providing fonts for your sites is Google's Font Directory. Google's Font Directory is free, open source, and features several high quality fonts, and even better there is no account required to start using the fonts. In this movie, we are going to explore how easy it is to use the Google Fonts API to serve fonts to your pages. So here I am at the Google Font Directory and you can find this at code.google.com/webfonts and you can see that we have a whole list here of fonts that are available in the directory.
Now it's not a huge number of fonts but it is growing. So I would imagine that this is going to continue to grow. Now the one that I am interested in and feel free to browse, but the one I am interested in is Old Standard TT. I want to use that in the Alice in Web Fonts site. So I am going ahead and click that font so I can learn a little bit more about it. Once you are looking at a font you can launch a font preview, or you can see the different variants available for Old Standard. You can take a look at the character set. So there are a lot of really nice tools here to help you get familiar with the font before you use it on your page.
Now I am going to click on the Get the code button right here and this will show you in a step-by-step fashion that how easy it is to use the font on your page. Now I am going to scroll down just a little bit so I can see little bit more of this and I would include both the Regular, the Italic, and the Bold and as I do that, you'll see that it updates the one line of code that I am going to need to add to my pages in order to use these fonts. So I am going to go ahead and select this line of code and copy it and it's all I really need to do and now I'm ready to use it on my pages.
So there is more here especially if you are a developer. Okay, so once again make sure you have copied this code and I am going to switch to our Exercise File. So here I have the google.htm file open and you'll find that in the 03_07 directory. Again, if I switch over to Design View just to kind of preview what this is going to be, it's just some body copy taken from Alice in Wonderland. So I am going back to Code View and start using our Google fonts. So right up in the head of the document I am just going to ahead and paste the code that we grabbed earlier from Google Fonts directory.
So I am going to be saving that file and again I want to go over to my FTP client, find my google.htm, and go ahead and upload that and here we can see the finished page, google.htm in the browser. We are using our Old Standard TT font. Notice that I'm getting bold and italic variations of that because we asked for them when we wanted to use it. We click those two checkboxes that then modified the code. So we're getting the proper font being served for Bold, Italic and Regular, and we will talk more about that little bit later on.
So just everything else that you'll usually do with Google, using the fonts from the Google Fonts directory is really really simple. If you want to get deeper into it, check out some of the more advanced functionality we saw earlier available through the Google Fonts API. That's especially helpful if you are a developer, looking to integrate these fonts into your applications. As I mentioned, at the moment the selection of fonts is pretty small compared to some of the services out there. However, the ease-of-use and the fact that it is free makes using a Google Fonts a pretty attractive option.
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.