Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Using Google Fonts

  • We are going to look at Google fonts and how you can use them to add interesting fonts to your designs
  • You can access Google fonts at
  • Google is pretty amazing in what they offer for fonts and these fonts are all free
  • If you click the New to Google Fonts? link, you can access the Developer area where Google is working on a new effects feature for fonts, this is now in beta so be sure to look this over and test completely if you plan to use it
  • Look over the various fonts that are available and also the options available for looking over the fonts
  • Choose Henny Penny or any font you like and click the Add to Collection button
  • Then click the Use button in the right side
  • Note the page load time, always check this out
  • Google is always adding new features, you can preview the Beta info for font effects and optimizing fonts at
  • With Google fonts you do not need to download them, just add a link to the font on their servers
  • Google provides the CSS code to add to your website for the font you want
  • This code builds the link to the font on the google site
  • 	 <link href='' rel='stylesheet' type='text/css'>
  • Copy this code onto your clipboard
  • Open destinations.html and save it as destinations-google-fonts.html
  • Move into Code View and hit enter/return at the end of line 6 on the page
  • Paste the code from the Google website so it is listed directly under the link tag that was on the page
  • This code tells CSS that the font is available and allows you to assign it to your selectors
  • We need to copy the remaining code from the Google website
  • We will use this font for the H1 and the UL tags on this web page
  • Add this rule as an internal style rule so only this page will use it
  • Add this property and value in code view for the h1 tag between the curly brackets
  • 	 font-family: 'Henny Penny', cursive;
  • Copy the h1 code and paste it twice, changing the selector to p, li
  • Change the selector to also include the definition list by changing the selectors to p,li,dd,dt
  • All the text on the page will use Henny Penny font from Google when you put this page into the browser

Using Google Fonts

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • New to Google Fonts? Link 0:25
  • Google Developers 0:58
    • Font Effects
    • Browser Compatibility
  • Preview Text 4:06
    • Sizing
    • Sort By Available Font
    • Filtering
    • Font Name, Creator
  • Collecting Fonts 6:48
    • Review
    • Use
    • Load Time
  • Google Font in Dreamweaver 8:30
    • Code View
    • Link Tag
    • Pasting Google Code
  • Integrating Fonts 11:17
    • Setting Up New CSS Source Code
    • New Selector
    • Adding Google Font
    • Preview
    • Definition List