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

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!

Creating a Custom Font Stack

  • We will create a custom font stack to use across our website within Dreamweaver
  • With a page open, there are numerous ways to get into this font area
  • Go to Modify->Font Families
  • This is the interface that allows you to build your own font stacks
  • The Available fonts area will list all the fonts on your system
  • Always list the font family at the end of the list
  • To create a font listing that contains different fonts than what are listed presently
    • Select 3 fonts in the list, clicking the left arrow after each font
    • Be sure to add the font family at the end of any font stack
    • You will see the font listing added in the font list at the top of this dialog

Creating a Custom Font Stack

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
  • Create New Page 0:13
  • Properties Area 0:28
    • Edit Font List
  • Adding Style Rules to Content 5:17
  • Preview in Browser 6:55
  • Summary 8:35

Transcription: Creating a Custom Font Stack

Welcome back to

We are now going to take a look at creating a custom font stack within Dreamweaver, and also talk about what a font stack is.0004

So, let's create a new page; and I'm just going to click the link within this area to activate a new page.0013

When I do that, all of the panels within Dreamweaver will also be activated.0022

Now, within the Properties area, there are two buttons: there is an HTML button and a CSS button.0028

And I tend to not use the CSS button much, because the CSS Styles panel does what I need; and when you first start working in this program, it's easier to just think of a central location to do everything you need to do with CSS.0036

But I am going to turn to this CSS button in order to get to the Font Stack area within Dreamweaver.0053

So notice: when I turn to CSS, I have a Font dropdown.0064

And you don't necessarily want to be creating any CSS styles within this area; I tend to find that people get confused with this, and always end up creating all kinds of styles that they really didn't want.0069

This is not like a word processing program: everything you choose down here, you are going to end up creating a new style rule for; and then, you can run into problems with your CSS rules.0084

But what I do want to do is go to the bottom of this Font list and click Edit Font List.0096

It's a quick and easy way to get to this interface within Dreamweaver.0104

Now, the way this font list works is: all of these fonts up top here are all built into Dreamweaver.0109

So, these come preloaded as a font stack.0117

And what that means is: it's simply a series of fonts for the browser to search for, always starting at the left and working its way right.0121

So, in other words, if I choose this one here, notice, it has Lucida Sans Unicode first; then it goes to Lucida Grande; then it goes to sans-serif.0132

The idea is: the browser is going to search for the first font in the list; if it can't find it, it is going to search for the second font in the list; and if it can't find that, it is going to end up using the default font for that font family.0146

It is always best to end your font stack with a font family, so that, if all else fails, at least you are getting the correct font family.0162

There are five different font families.0173

On the right-hand side here, we have all of the available fonts for our system; so, the fonts that are readable within your system are all listed here.0176

Now, what I am going to do is choose this last item that says "Add fonts in list below," and I am going to make a different font stack to use.0188

Now, I know all of these fonts are available on my system; but would they be available on somebody else's?0199

Probably not: when you install some of the Adobe products, you are also installing some fonts along with it.0207

So, I don't even know what this font is, but let's try it: I know it's on my system.0217

Once I have chosen it, I will hit the left arrow to move it over to the side, and notice, it becomes a new font stack (or at least the start of one) right here.0223

Now, let me go find another one that I haven't really used much; and that is this one.0235

Just choose some fonts that you are curious about on your system; you probably won't have exactly the same ones as I do.0240

I'll move that one over; now, as long as I have this first font, we won't even see the second one.0248

And what I'll do is put in a third font (let me put in this one), click the left arrow, and the last thing I want to do is put in a font family.0255

And, if you scroll to the very bottom of your Font list, these are the five font families.0267

Now, you can think of monospaced as looking like the old typewriter-style text: each character is a little bit wider and somewhat separated.0274

So, I don't know what font family these are from; but what I want to have happen is: I want a serif font added at the end.0284

Now, because I don't know what these are, I am not sure if this family matches these fonts or not; but I'll just go ahead and use serif anyway.0294

Now, usually, you want to pick three fonts in the same font family, and then add the family at the very end.0307

I'll go ahead and click OK.0314

Now, what I am going to do is type out "Wanderlust Travel" on my page; I will make it a Heading 1 using Ctrl or Command, 1.0317

And I want to style that Heading 1.0328

I'm going to go ahead and save this, so I'll do a Save As, and I'll put it in my Wanderlust Travel site as font-stack...because I am going to add some CSS style rules specifically for this Header 1 on this page, using that new font stack.0332

And then, I can look at it in the browser and see what that first font looks like.0351

I know I have it on my system.0356

So, I will click the + sign in the CSS Style panel; and, within this area, I am going to choose a tag.0358

Since I have my cursor in the H1, it shows up here; I will make it this document only, and click OK.0367

Now, the font family I am going to choose is that new one I made; and notice, it's at the bottom of the dropdown list.0376

I'll go ahead and set the size to 1.4 em's to make it a little bit bigger, and I'll set the color; this will make sure that I am actually applying my colors.0384

I'll set the color to red.0397

I'll click OK, and you can see that isn't that big; I think I'll go ahead and make this 1.6.0400

But there is my font, available to me and only me right now: I'll put it in the browser, and notice, it did end up showing; but is that the same font in the browser as it is in Dreamweaver?0409

It looks like it to me.0429

There are some times, once in a while, when you get to a font that is kind of a crazy font, and it may have been put into your system list, but it can't be used in the browser.0431

But that is how you can add a font stack.0443

Always test these different font stacks in your system; and then, the best thing to do is to make sure you test it on somebody else's system.0447

You will find a real difference in what your fonts look like when you put them up on the web server, and you may have observed...if I go out to my...I'll just use this browser that's open; I will go out to cmairscreate here.0458

Let me close that up and do that one more time.0477

I want to show you something here, on my site.0487

If you go out to my website, you may see a different font, right in this heading area, than you see on my system.0489

So, go ahead and compare yours to what is on my system; I am viewing this based on my operating system, but I do have some different fonts in this list.0499

And I do that so I can show people some of these different types of things that can happen.0509

That is creating a custom font stack in Dreamweaver.0516

You do need to make sure you test and look at these, and look at them again once they are on the web server, just to make sure your fonts are applying correctly.0520

But we built a new font stack within Dreamweaver, using the Edit Font List dialog box.0530