New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding rich typography

From: Creating a First Web Site with Dreamweaver CS6

Video: Adding rich typography

CSS3 and HTML5 really give you a lot of control over a lot of your content, including type. And that's what I want to do, I want to add even more custom control over--n in fact, this line right here. I've already added a nice drop shadow to it which I like, but really I want to go beyond this, maybe I want to get rid of the red, and really I want to add a custom font right here, okay, for this Intellectually elegant, because quite frankly, you can't say Intellectually elegant and not have a fancy font. Well, in the past that used to have to be an image, but now I can use a web font for those two words. All right! So, the first thing I'm going to do is change the color.

Adding rich typography

CSS3 and HTML5 really give you a lot of control over a lot of your content, including type. And that's what I want to do, I want to add even more custom control over--n in fact, this line right here. I've already added a nice drop shadow to it which I like, but really I want to go beyond this, maybe I want to get rid of the red, and really I want to add a custom font right here, okay, for this Intellectually elegant, because quite frankly, you can't say Intellectually elegant and not have a fancy font. Well, in the past that used to have to be an image, but now I can use a web font for those two words. All right! So, the first thing I'm going to do is change the color.

So, it happens to be my h1. I can change that maybe to white. Here we go! And now for these words, I want to create a new style. So, using the CSS Styles panel, I'll go down, clear it on here into the bottom, and I create a new CSS Rule. And if I take the various selector types, notice how there's like an ID. There happens to be an ID called logo, so I've created that earlier.

There happens to be tags as well which include the h1, but really what I want is I want a class, and a class can apply to any HTML element. Just like a lot of people can belong to a class, well, you can have many elements on a page that have this class, can have this fancy font that I'm going to implement. In fact, let's give it a name of fancy. All right! With that added, that name, I can select OK, and now I can create a CSS rule definition for fancy. All right! In fact, I can take a look at that font family, and before I do that, notice that it created that right over here, here's my class.

But let's take a look at the fonts, pretty standard fonts right here. I'm not impressed. As a designer, I'd want more control. Well, right down here, I can edit the font list. That sounds like a good idea. I can add these fonts which are available on my system, but they are not going to be available on other people's systems. So, I'm not going to worry about those. I need to add a web font, okay? Web font is going to be available to everybody. So, I'm selecting web fonts, and here I don't have any added yet, but I'm going to add one now by selecting Add Font.

And here, since there are different web browsers, I actually need different types. So, I need to add a web font. In fact, I need to add multiple web fonts for various different browsers. Well, more often than not, you're going to have a TrueType font on your machine, and there are actually services available that will take your TrueType font and will make these other different versions. You can go to fontsquirrel.com. There happens to be a font-face generator that will make these additional file types, which is what I've done.

Now if you do have access to the files for this course, what you can do is you can go into your Assets folder, into your Fonts folder. You'll notice this Monsieur La Doulaise-- I hope I'm pronouncing that correctly. But there's that font, including the other fonts that I've used Font Squirrel to convert them to these different types. So selecting the EOT font, selecting Open, it recognizes the other fonts, we're good to go. In fact, I just need to make sure I've properly licensed the above font for website use.

Another service is actually Google's web fonts as well. But this is where this font came from. So, selecting OK, selecting Done, selecting OK, yes, we have to go through all those steps, but now I can select that particular font. Right down here is where it's listed, selecting it right there, and I could click Apply, but I don't have this defined as my fancy class. So, I'm going to select OK.

Now, for this text right here, I'll turn off Live View, but with it selected, I can go to my CSS. And for that CSS, I can apply a new class. Right down here is where it's listed. Okay, so for that part, I can select fancy. Oh! It looks like it changed, but it's not quite the right font. Well, it actually is.

I'll just save my page, and I'll click on Live View, and you can see that it is using that particular font. It looks great! Notice how it added this style sheet CSS. I'm not going to worry about that, but right down here, here's my fancy class, and there it is. It looks pretty good but could be larger. So, my next step is just double- clicking on it and then changing the font size. So, changing the font size to let's try 36. It could actually be larger.

Let's go to about 48, clicking Apply, and you can see how that looks. Looks pretty good, now we'll go a touch larger to 52 just like that. So that looks pretty good. The last thing I'm going to do in this case is go back to my Design View, turning off Live View, and then just moving it up. So, the position from the top, well, I can take that to say 120 just to see how that looks, clicking on Live View. Looks pretty good! One last tweak for that item. Let's take that to 100. All right! Clicking on Live View, that looks good! So, that's how you can implement a web font.

If you do want to see all your web fonts, you can go to Modify > Web Fonts, and that's where you can add your various web fonts and make them available. It will appear in that dropdown list. So, that's adding web fonts, customizing your content, especially your Type content, making it much more flexible and honestly a lot more fun as a designer. So, take advantage of using web fonts in your various designs.

Show transcript

This video is part of

Image for Creating a First Web Site with Dreamweaver CS6
Creating a First Web Site with Dreamweaver CS6

30 video lessons · 39660 viewers

Paul Trani
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

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
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.