Start learning with our library of video tutorials taught by experts. Get started

Web Fonts First Look
Illustration by John Hersey

Using the Google Font API


From:

Web Fonts First Look

with James Williamson

Video: Using the Google Font API

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Web Fonts First Look
3h 23m Appropriate for all Jan 12, 2011 Updated Dec 13, 2011

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.

Topics include:
  • What are web fonts?
  • Understanding the font stack
  • Using @font-face
  • Rendering basics
  • Choosing a font hosting service
  • Downloading licensed fonts
  • Generating web fonts
  • Font sizing
  • Transforming text
  • Creating special effects with text shadows
Subjects:
Web Web Fonts
Author:
James Williamson

Using the Google Font API

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.

Now one more thing. You'll notice that just below this we see an example of how to use the font on your page once you've added this code. In a font-family declaration you can simply use Old Standard TT in place of say one of your standard system fonts. Now if you want to provide fallback font content for that, you'll do that directly after that, so it's just like building a font stack. You are just using their name. Now there are some advanced techniques, if you want to see that. You've got some JavaScript options using the Web Font Loader and other options that the Google can provide to you.

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 it's one line of code and then I am going to change my paragraph declaration here from Arial, Helvetica, and sans-serif, and I am going to add to it Old Standard TT. So that's exactly what we got earlier in the Google Fonts API. This is exactly what it was telling us to add. Now you'll notice I am using single quotation marks. It doesn't really matter. You can use single or double. I'm also going to provide a fallback font. I am just going to do ,serif. So it could be anything you want. You could go ahead and do a whole font stack here if you wanted to, but at least this way I am going to be assured to the fact that we get a serif font in case some of these browsing without JavaScript turned on or if the browser doesn't support web fonts.

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.


Expand all | Collapse all
Please wait...
Q: This course was updated on 12/13/2011. Can you tell me what's changed?
A: The movie "@font-face syntax update" was added, which explains changes to @font-face in HTML5.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Fonts First Look.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

Web Fonts First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion. For updated training, check out Choosing and Using Web Fonts in the lynda.com Online Training Library.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked