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!

Adding Fonts from Fontsquirrel

  • Fontsquirrel is located at
  • Read over their information about the font before you use the fonts
  • Look over the license section, fonts are all licensed so you have to be careful
  • Check the license as you look at the fonts
  • Steps:
    1. Download fonts you want to use in the various formats
    2. Set up the @font-face in your CSS
    3. Add src with urls to the font locations in your site, assign the font family name
    4. Use that name in yoru CSS for the various selectors
    5. Watch for the globe icon in the font description
    6. Download the fonts & unzip
    7. Go to the font generator & upload, only do 1 font for this lesson
    8. Select optimal & click agreement, you must have checked the licensing for each font
    9. Click the button
    10. Wait for it to give you a kit which contains an html file, and the font in various formats
    11. The Add the correct type in the format area & the sources twice
    12. View the CSS stylesheet that the font generator makes & the various html files
    13. Test the fonts in the various browsers
    14. @font-face {
      font-family: 'ChunkFiveRegular';
      src: url('fonts/chunkfive/Chunkfive-webfont.eot');
      src: url('fonts/chunkfive/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
      url('fonts/chunkfive/Chunkfive-webfont.woff') format('woff'),
      url('fonts/chunkfive/Chunkfive-webfont.ttf') format('truetype'),
      url('fonts/chunkfive/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
      font-weight: normal;
      font-style: normal;
  • If your fonts are not working correctly, note this: IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.
  • Troubleshooting info:

Adding Fonts from Fontsquirrel

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
  • Font Squirrel Fonts 0:08
    • Font Squirrel Website
    • Download Font Zip File
    • Extract Font File
    • Web Font Generator
    • Download Web Font Kit
    • Extract Web Font Kit
  • Working with Font Squirrel Fonts 8:20
    • HTML Font File Preview
    • CSS Font File
    • Copying over Font Styles
    • Adding Styles
    • Preview in Browser
    • Troubleshooting Errors
    • Adding more Styles
    • Preview in Browser
  • Summary 16:58

Transcription: Adding Fonts from Fontsquirrel

We are now going to take a look at how to add Font Squirrel fonts to your web pages, should you wish to.0000

And I have the add-fontsquirrel-fonts page open, and this is really just a page with some default text on it; it is actually quoting Shakespeare with a couple of headlines on it.0008

But we have a Header 1, a Header 2, a Header 3, and some paragraphs on this page that we can go out and find a font for, and apply it to this page, and take a look at what happens.0022

Now, Font Squirrel has a little bit more complicated of a process than working with any Google Fonts or a few of the other font sites you may find.0035

So, we are going to go out to Font Squirrel; and notice, it says "100% Free for Commercial Use."0047

Now, you do have to make sure that you look at the license on these; but I am going to work with Font Squirrel.0055

I'm going to download the fonts from here, and then I have to come back to this, once I have done that, and set them up within Dreamweaver.0062

So, ultimately, we are going to add a Fonts folder to our web pages; and inside that is where I am going to place any fonts I want to use.0072

I'll go out to Font Squirrel, and we'll take a look at working in this website.0083

Now, I am in the...what section am I in?--I am actually not sure, but what I want is the Blackletter section.0090

Now, the idea behind this is: we want to find fonts that look a particular way, have a particular design to them.0100

And I am going to go out to Blackletter; since we have Shakespeare fonts on the page (Shakespeare is tough to read already), I am going to make it look Shakespeare-ish in terms of my font.0109

And I think I'll start with this Dearest font; this is a bit heavier font--you can see there is a lot of extra information in here--so it's a good one to test in terms of file size.0122

Also, notice, this font has the little globe here; and that is available to me on my website; but I will double-check the licensing, just to make sure.0135

The first step is to download the font, and this is telling us it's a .ttf font, which is a TrueType font.0148

I'll go ahead and click on that to download it; and I want to save this downloaded .zip, and I'm going to go out to save it right into that Fonts folder I showed you earlier.0157

I'll put it right into my website files, inside my fonts; now you can see there is another font located in here, but I'm going to add Dearest to it; so I'll click Save.0170

Now that I have that added, I'm going to open it up and unzip it; it always comes in as a .zip file, so I'll go ahead and unzip it, and you can see, there are three different .ttf files available.0184

There is also a license here; so let me extract these right into a folder for all of these fonts, and once it's extracted, I'm going to take a look at the license.0201

When I open this, it was found on the Internet and did not come with a license; while we try to make sure that all the fonts are properly licensed, there are many fonts that have been abandoned by their authors.0216

Make this a little bit easier to read for you...0233

So, you can see: we are not lawyers and don't pretend to be them on TV; please report any errors.0236

Now, since we are just using this on a page as an example site, I will go ahead and use this; but this is not a font I would necessarily put onto a commercial website.0246

So, how do we go about working with these .ttf files, now?0258

What we have to do is go back to Font Squirrel; so let's do that.0264

Once we are back on Font Squirrel, I am going to go to the Web Font Generator.0270

The first step is to locate and download the fonts you want and check the license; then, the next step is to move forward to the Web Font Generator, because the fonts that we have downloaded, we cannot directly use; they have to be modified.0276

And that is what the Web Font Generator will do for us.0290

So, I'll walk you through the steps of this piece.0294

What we are going to do (and you can see it says right here what to do): I am going to click Add Fonts, and then I need to go out onto my system and locate those fonts that I want to use.0298

I'll go out to my Wanderlust Travel website; within that Fonts folder (and that is why it's important to keep them organized) there is a Dearest folder, and here are the fonts.0312

I'm going to select all 3, click Open, and let's see what happens.0324

You can see, this little interface comes up, and it tries to go through and add the fonts.0331

Now, sometimes, despite it being on Font Squirrel, you will get an error that it couldn't deal with these fonts--and it won't even let you upload them.0338

So, if you see them in this list, you are halfway there.0347

The next step is to determine the settings for converting your fonts; and I always choose Optimal, just because that is the recommended settings for performance--for the fastest performance, also.0352

The idea here is: you are signing the agreement that says you checked the licensing, and it is legal to embed these into our pages.0367

I'm going to check that, but like I said, this one is questionable; so I'm not sure I would use it on a commercial website and the commercial website's pages.0378

I would go find a different font that has clear-cut licensing that says it is fine to use it; but this is a great font to use to show you.0389

I'm going to click Download Your Kit.0398

What this is: it says it's a kit, and it literally is; it contains a few different files.0403

And those files contain an HTML page, a CSS page, and a few other pieces to it; so, as you can see, it gets downloaded as a .zip file.0410

I'm going to save this and put it into that folder where all of my Dearest fonts are located; so I know that this is the kit for that font, located inside my website files.0423

I'll click Save; and let's go take a look at what is in this .zip.0438

You can see, there is quite a bit; now, there is a stylesheet piece; that is what we want to be interested in; there is also a text file, and there is an HTML file, as well as a demo.0447

Now that I have these downloaded, let me go ahead and extract them; and I will extract them directly into the Dearest folder, so that it's all available, very easily, for me.0464

You can see, that specimen file does not want to work; I'll just skip it.0479

I'll go ahead and...Don't Copy; and there I am.0487

Now, I'll close this up; we are more or less ready to work with it in Dreamweaver.0494

Let's move out to Dreamweaver; and what I'm going to do here is open up the file called add-fontsquirrel-fonts.0500

And this has some Shakespeare on the page--four different paragraphs--and it has a Heading 1, 2, and 3, also on the page.0508

When we click on them, you can see this is a Heading 2; you can also see it down in the Properties area.0518

Now, I'm going to close up the Properties, just so I have a little bit more screen real estate here, and you can see the full page.0525

Now, how do we work with this particular font?0532

If I go over here into my Files panel, I have my Font folder; and within this folder (go inside the Dearest font folder), I have all my files that I need to work with.0538

The first thing I want to do is look at the freeware license: I will open that up; this one said exactly what we saw before, so it's also included here--"did not come with a license."0553

The other thing I'm going to take a look at is the HTML file here; I'll go ahead and open that up, and if I put this in the browser, what it will do is preview this font for me, so we'll be able to see what it looks like.0569

You can see this is somewhat unreadable; and these are some of the things that I want you to be able to see.0585

But let's try it anyway.0592

The CSS file gives me some very good information on how to work with this font.0594

I'll open up the CSS file; and you can see there are three different versions of information within this font.0601

I have the Outline Regular version right here; the next piece is the Open Regular version; so Font Squirrel did quite a bit of work for us; and here is the Regular.0611

What I am going to do is copy the Regular piece; and you want to make sure you copy from the @ symbol, before font-face, all the way down to the closing curly bracket.0626

And I'm simply going to copy this from their style sheet, and I'm going to add it to mine.0638

Now, I'll add it underneath the title, up in the top here; we will need to do just a little bit of hand coding.0647

These types of things, or at least these websites, are not completely integrated with Dreamweaver interface features, but that doesn't mean we can't add them.0656

And I'm going to paste that font face in this area.0666

Now, what happens when I did that is: I have told the browser, when it goes to read this page, that there is a font family called Dearest Regular.0671

And this is how I reference it within my files.0682

But what happens is: you can see, there are these different file types.0687

There is an .eot (and you need both of these); this one is for Internet Explorer older versions; and each one of these formats is related to a specific type of browser.0693

So, if you pull them all in, it should be able to work without any issues.0707

We'll have to see.0713

Now, that is my font face; what I am going to do is: I am going to go ahead and add some styles here.0714

I'm going to add an H1 style; I'll start with this style, and I can simply copy this font family, paste it down here, and (I'll get these lined up--there we go) let me add a font size--you always want to add a size.0722

And, since these are fairly small, I'm going to make this a 2-em in size.0746

I'll keep it black, and save my page; let me go see if my Header 1 is working.0753

We'll put this in the browser.0760

And you can see, in this particular browser, it is not working; so how do I go about getting this to work?0765

Well, let's take a look at our code: we have an H1; we are referencing it as dearestregular, just like we should; but it may be an issue of us not having this font face right within this section, or it could be that the browser can't read the formats we are using.0774

So, let's try a different browser and see if we get the same thing...and it looks like we do.0797

So, for some reason, our fonts are not working; and one of the reasons may be because of where it's located.0804

Let's double-check the path to this.0814

Now, in order for my page to be able to access this font, notice: this is looking for the font at the same level as my page.0818

I actually have this font located inside a Fonts folder, and inside of a Dearest folder on top of that.0830

What I need to do is add a different path here: so I'm going to say fonts, because it's in the Fonts folder; and I'm going to say dearest, because it's in the Dearest folder; so I am telling the browser where to find this.0838

It has to be able to reference it.0855

What I'll do is copy this and just make sure that I get this inside each one of these.0858

And normally, you are going to want to keep these inside a folder (such as this); so you will end up doing something like this and putting each font inside its own folder.0869

But part of the problem is: it can't find new fonts to load; so let's save and see what happens with this one.0879

I'll go to Preview Now; and guess what--it is working perfectly!0889

The browser just could not find our font; let's check out some of these other browsers, as well.0894

I'll preview in Firefox; and Firefox is taking a little while to load...there we go; and notice, it's working just fine.0901

What I can do is go ahead and...I'm going to copy this, and I'm going to set it for my H2; so I'll change this to H2 and make it just a little bit smaller.0913

Instead of 2 ems, let's make the H2 1.8 instead--just a little bit smaller.0928

I'll do that same thing once more for my H3; remember, we have an H1, 2, and 3 on the page.0936

This one I'll make 1.6; and I am keeping these a little bit bigger than a standard font for this type of thing, only because this font is rather fancy, and it makes it a little bit hard to read.0944

I am literally just copying that same thing, all the way down.0958

Change this one to a p tag; and I'll make my p 1.4.0963

There is my Header 1, 2, 3, and p.0970

Now that we have done that and added those rules, let's take a look at our page in the browser, once again.0974

And look at that: there is our Shakespeare being quoted in this fancy font on our website.0981

Now, the benefit of a Font Squirrel font is: I have control over that font, as to where I place it; I also have control over storing those files.0989

So, if I decide I don't want them anymore, or I want to add more fonts, it's a little more under my control, because it will be sitting on my web server.1001

When I go to upload this page, I have to make sure this Font folder ends up on my web server; but that is how you can work with Font Squirrel fonts and add those fancier fonts to your website, controlling and downloading the fonts themselves, and Font Squirrel creates that kit for all the different formats for the different browsers.1011

You can see the benefit of working with Font Squirrel fonts: you are in control of those fonts themselves.1037

Design View is never going to show them to me, and you are always best going out and fully testing the browsers.1045

There is one more test I want to do, and that is an older version of Internet Explorer--and show you that, and you can see: because we have so many formats represented, even Internet Explorer 8 (which is way back and tends to not support quite a few things)--you can see, it's working perfectly.1053

That is how you can add fonts to your web pages, using the Font Squirrel website.1075