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 CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • 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 Educator.com

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

  • Google offers fonts that are available to use on your web pages
  • You should also double check the licensing for these
  • You can use Google fonts to add interesting fonts to your designs
  • Go to fonts.google.com
  • Google is pretty amazing in what they offer & these are free
    • Click new to google fonts
    • Click Add to Collection for the fonts you want
    • Then click the Use button in the right side
    • Note the page load time, always check this out
  • Google is always adding new features, show the Beta info for font effects & optimizing fonts at https://developers.google.com/fonts/docs/getting_started#Subsets
  • With Google fonts you do not need to download them, just add a link to the font on their servers
  • Then they give you the CSS code to add to your website
  • You first need to link to the Google website where that font is located
  • This code builds the link to the font on the google site
    • <link href='http://fonts.googleapis.com/css?family=Lily+Script+One|Shojumaru' rel='stylesheet' type='text/css'>
  • Once you have the connection to the Google font on their website, this code tells CSS that the font is available & allows you to assign it to your selectors
    • font-family: 'Lily Script One', cursive;
    • font-family: 'Shojumaru', cursive;
  • Always preview the web page both locally and once again once it is on the web server to be sure the font is showing correctly
  • It is also advisable to offer additional fonts in the font stack in case Google cannot be reached

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
  • Google Fonts 0:05
    • Access and Preview Fonts
    • Font Collection Area
    • Review Font
    • 'Use Font' Feature
  • Adding Google Fonts 6:21
    • Adding New Style with Google Font
  • Preview in Browser 11:29
  • Summary 13:10

Transcription: Using Google Fonts

We are now going to take a look at installing some fonts from Google.0000

And this is a free service, but like any other fonts, you always want to double-check that licensing issue--can you tell I am saying that over and over again?--because it is very important.0005

But the idea is: we want to be able to work with Google Fonts, and we want some of these fonts to show up on our web pages.0018

That is what we are going to take a look at.0027

Now, how do I access them and insert them into my web pages?0029

Well, you go out to google.com/fonts, and I am taken to a page--this is kind of an interesting page--where you can select fonts.0034

And I'll click on "Word," and what it does is show me a single word from the font, and it allows me to view quite a few of these, as you can see, all at one time.0045

And sometimes that is a bit overwhelming, and you want a few more letters to look at than just these six.0057

If that is the case, click on "Sentence," and it shows you a sentence based on that font.0065

I think this is a really nice way to be able to preview the fonts, because usually, you are using a few more letters than just those few that it shows you in the "Word" category.0072

Now, the next piece is a "Paragraph," and it shows you what a paragraph of that text would look like.0083

One thing to be careful of: it is nice to use some of these fonts for headlines or your header tags, but when you get into paragraphs, you can start to see--it does get a little more difficult to read some of these.0091

They do end up rather light on the page, and sometimes they have so much extra character pieces to them that they are hard to read.0105

So, keep that in mind when you are looking at fonts.0115

I think the "Sentence" category is more like what a header would look like.0119

Once we have an idea of which fonts we want--and notice, over here in the filters, I can filter based on the types of fonts; so I have a few options here.0125

I can filter based on thickness, and it's right in the middle, so that put me down to 202 fonts.0137

So, there are quite a few different pieces in here; if I remove the filters from all of these, you will see--nothing is selected.0146

You do want to go through and test how you are going to set up these filters.0157

I'll click the Reset All Filters button so we can get back to having some fonts available to us.0163

Now, when I go to use these fonts, what I want to do first is this piece down here: let me open up this collection area, because this is what you are actually going to be working through.0170

Notice: it says, "Get started by clicking the Add to Collection."0185

I'm going to start with just one font for now; and let me go ahead and choose one in here that looks a little bit different, so we know that it's applied to our text.0190

And I'll go down, and let me do...I'll pick one...this one is kind of cool; I'll do Trade Winds.0201

The first step in working with a Google Font is to click the Add to Collection button.0210

What that is going to do is add that font down in the bottom here for me.0215

I'll click Add to Collection, and you can see, the font is now listed down here.0221

Basically, you go through these three buttons as you move forward.0228

I choose the font, and it gets added here to my collection; and I could do a bunch of them at one time.0233

We are just going to focus on one for now, to show you how to work with this.0240

Now that I have chosen my font, I'll click the Review button, and what that does is allow me to look at it in its little different formats.0245

Here it is as a headline; if I click Paragraph, that is what it looks like as a paragraph.0256

Once I have reviewed it and made sure that that is what I want, what I'll do is click Use.0263

And what Use is going to do is: they have this whole little interface page here for you.0270

It gives you page load time information--in other words, if you add this font, how much is it going to add to my page load time?0276

Some of these fonts really move this up high, depending on the decorations within each letter.0286

This one, despite having decorations in the letters, isn't too bad--at least I am still in the green.0294

So, I'll continue and scroll down the page.0301

Next, I want to choose the character set: and you can see there is only one for this font, so I really don't have too much of a decision to make in #2 for this particular font.0305

Some of the fonts have a few other options here; the more character sets you use, the higher the file size.0317

Now, this piece here is basically giving you the code to copy and put into your pages in #3, so that would go at the top of your website page; and this shows you how to use it within your pages.0326

So, what I'll do is: I am going to copy this piece--I'll just do a copy--and I am going to go create a brand-new webpage, add this code to it, and then I'll create some text and work with this font.0343

And I'll work with it down this way, assigning it as properties.0360

I can come back to this piece--notice it's just font family--and what I do is: within the single quote, I put in Trade Winds with a space.0365

Let's go do that in Dreamweaver.0377

Right now, I need to create a new page; so I'll go ahead and just click the Create New, since it's handy.0381

I am going to say "Adding Google Fonts," and that is going to become my header, as well; so what I'll do is copy that and paste it onto my page.0389

Adding Google Fonts...I'll say "Here is the code to use in the head section"; since I have that copied, I might just as well make use of it.0406

Oops, it looks like I lost my copy here; so I'll have to go back to the website and grab that; let me minimize this, and I'll grab it once again.0421

Grab a copy; go back to Dreamweaver; and I'll paste it right here; there we go.0435

So, I'm actually looking at it; now, that is the code, but this isn't where I want to put it, obviously.0441

I'm going to move over to Code View and add it; and I'm going to add it up here in the head, right underneath the title.0449

And when I do that, I need to put it inside a Style tag; opening and closing tag, and I'm going to add some information in here, and I'll drop the link right above it.0457

So, there is my code.0473

Now that I have that set up, you can see, the name of the font is attached right here within the hyperlink.0475

What we are actually doing is going out, or telling the browser to go out, to the Google website and download this font when the page loads.0482

We aren't officially downloading the font onto our web servers; we have to make sure that the user can get out to Google and download them.0495

So, when you use a Google Font in this manner, we are actually going out onto the Web to do it.0504

Now, what I can do is set up some code here; and I'll go into Split View; I'm going to make this a Header 1...and that isn't where I wanted to put it.0510

Now, in case that would happen to you, what actually would happen is: my styles wouldn't work inside here.0523

Now, if you put HTML code within any style area on your pages, it is not going to work.0532

So, I will just delete this--no problem.0541

Let me highlight this code and add a Header 1 down here, in the correct area.0546

As I said, as I go through this course, I kind of want to do a few little things and a few little mistakes (and I do this in my classes, as well), just to make sure that you don't have those issues--or if you do, you know what to do about them.0553

So, there is my code; now, how do I go about styling this H1?0570

I am going to add a new style, and I am going to do it in code this time; so I am going to add the H1 and add a couple of curly brackets.0576

Now, what I simply do is plug in the font family, and the font family is going to be Trade Winds.0587

And you have to make sure that you use it exactly how it is spelled right here; and that is what that next piece of Google code was trying to show you.0599

So, I'll do Trade Winds, and I will use a single quote.0609

Now, why the single quote? (and this could be a double quote, also, as long as they match on each side)--because this font has a space in its name, we have to put it inside quotes for CSS.0614

And what they had set up was: they had cursive as the other font family piece.0629

So, my H1 is going to use Trade Winds; and I don't have a backup here--in case it can't access Google as Trade Winds, it is going to go to whatever the default is for the cursive family on my system.0636

Now, let me close up this Properties area so we have a little more space.0652

And I'll move into Design; I'm going to do a Save, and I'm going to save this as add-google-fonts into my Wanderlust Travel website; so you have a good example of some of this code.0657

Now, let's take a look at what happens if we put this in the browser; I won't be able to see it here--it has to be a full browser that can go out to Google and bring it in.0678

So, I'll go ahead and preview, and look at that--there is our font.0690

I didn't even add a size for this particular font, but there is our Google Font.0695

Let's set it up once again, and expand upon that just a little bit.0703

That is my Header 1; I added a font family; let me add a font size.0707

And my font size I will set up...instead of pixels, I'll use 1.6 ems.0715

We're typing just a little bit of code here; and then, what I am going to do is copy that, paste it once again (so I don't have to type it out), and this time, I'm going to make it...let me do 1.0 ems.0722

And this is going to be our p tag; so, in other words, we are styling everything on this page with that Trade Winds font.0738

I'll go out to the browser once again now, and let's take a look at our page; and there it is.0747

We are all set with our Google Font and adding it to our web page.0755

Now, if somebody could not access the Internet or access Google, they would not be able to see this font.0761

Now, they would have to be on the Internet in order to view your page to begin with; so the first one of not being on the Internet should be taken care of automatically.0770

But, if they can't access Google, they will see the standard, default cursive font, because we set that as the font family.0779

But that is how you can add Google Fonts to your website, using the googleapis.com website; and you will see--it is amazing that Google allows you to do this and makes it so easy to work with it.0791

There is our Google Font of Trade Winds, which we just added to our web page.0806