Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Using CSS gives you an amazing amount of control over your Web site's typography, but it doesn't change that the fact that we're still restricted to using standard font-families. Since HTML does not store font information, your Web page relies on the client's machine to have the requested font installed. If it's not available, another one is substituted. With CSS, not only can you control which font is initially requested but which ones should be used for substitution as well.
The way this works is that if you only request one font-family, if the client machine doesn't have it installed, the browser will then substitute its default font. Since you have no control over what someone has selected as their own default font, a better approach is to declare multiple fonts which will continue to go down the list until an installed font is found. Your final declaration should be a generic font-family, such as serif or sans serif. That way, in the unlikely event that none of your requested fonts are loaded, at least the text will display in the desired type of font.
In CSS terminology, this is what we call a font stack. Let's take a look at how Dreamweaver tackles the process of declaring font stacks and then create our own custom stacks to use within our site. So here we have the mission.htm opened up. So one of the things we want to do is take all of the heading 1s in our main content region and change that font. Currently, if I click inside this heading, Who we are, I can see down at the Properties Inspector that's being defined as Georgia, Times New Roman, Times and Serif. Now it's inheriting that value from the body tag, but what's going to happen is a browser is going to open this page, and this page is first going to say, "Excuse me. Do you have Georgia installed?" If the answer is yes, it will display the font in Georgia.
If not, it'll then say, "Well, what about Times New Roman? What about Times?" Or finally, it might say, "Okay, well, just give me your default serif font if none of those other fonts are available." So we have several fallback fonts here. Okay. We want to use the font that's a little bit less of the standard font. One of the interesting things that have happened over the past few years is that the numbers of installed fonts that are broadly installed on computers all across the world are increasing. So we are increasingly not limited to just Georgia, Arial, Verdana, Times New Roman.
We have a few fonts now that are widely accepted enough to where we can start using them in our font stacks. Now one of the fonts that I'm going to use here is called Chaparral Pro, and that's a font that's installed with the Creative Suite and widely installed in the machines all across the world. Of course, it's not as widely installed as Georgia or other fonts. So it's one of those fonts where you're going to need to declare within the font stack some common fonts as a fallback for this. So how do we go about declaring a custom font stack? Well in Dreamweaver if we grab the pulldown menu for our font here, we can see that Dreamweaver actually comes with a lot of pre-installed stacks. Look at all these: Verdana, Geneva, sans serif, Georgia, Courier, Arial. There is a whole list of these things that are predefined.
Well, Chaparral is not one of them. So we need to go ahead and add this, but I want to do this in the course of defining something for our heading 1s in our main content. Right now, we'd be editing the font stack for the body, and that's not something I want to do. So I'm going to make sure, again, I've clicked inside this heading 1. I'm going to go over to my CSS Styles panel, and I'm going to scroll down, not too far, until I find #mainContent h1. Cool. I'm just going to double-click on that to bring up my CSS Rule Definition dialog box. And now I can return to that dropdown menu for the font family, and we'll be affecting the proper selector.
Okay, so since I don't see any of these presets that really do what I need it to do, I'm going to go right down here to the last option, which is Edit Font List. Now this gives me the ability to delete font stacks, add new ones, move font stacks up, move them down the list, that sort of thing, rearrange them. What I want to do is I want to go through the Available Fonts. So right here all the fonts are installed on my machine, and if I just type in C, that's going to move me down to my Cs, and I'll just keep browsing down until I find Chaparral Pro. There it is.
I'm going to hit the right arrow after highlighting it, and it's going to add it right there. Now the first font you add is the first font in the font stack, so you want to do them in order. Now I'm going to keep scrolling up and down, and I'm going to find Cambria. That's another font that's starting to gain popularity in systems all across the world. And now I need a fallback font that's a little bit more of a standard font. So for this I'm going to switch down to my Gs, and I'm going to find Georgia. Now there're some systems that don't even have Georgia installed on it, but it's clear from these three fonts that I need a serif font.
So if I scroll all the way down to the bottom of my Available Fonts stack, I'm going to find my generic font families right down there, and fantasy might be my favorite. That sounds pretty out there, doesn't it? So I'm just going to go ahead and choose serif and add that to the end of the font stacks. So here we have Chaparral Pro, Cambria, Georgia and serif. I can also move that stack up the list a little bit, so that I don't have to scroll as far if I'm going to be using this a lot. I'm going to go ahead and click OK, and now when I grab that pulldown menu, it is the very first option.
So I'll go ahead and select that. Click OK. Now when we close that we notice that both of our headlines are now formatting in the Chaparral font. Now obviously, I have that installed on my machine, so that was pretty easy to do, but what about fonts that aren't installed on your machine? Well, you won't be able to use that particular tool to do it, but you could still hand-code those if you wanted to. So if I scroll down, I see that we have some divs down here, and they have a class called callOut. So what if I wanted these headings to be a slightly different font than all the other headings in my file? I could use that callOut h1 selector to do that.
So I'm going to use my tag selector to go find that in my source code. Now remember, I can hold my Alt key down. If you're on a Mac, you'll hold your Command+Option key down key and click. That brings up the Code Navigator, and I'm just going to find this mainContent .callOut h1. That's the one I want to use. So when I click on that, over here in Code View, that should jump me right to that selector. I'm going to create a blank line right after the last line's semicolon. So I'll create a blank line between it and the curly brace. And I'm just going to type in font-family, font-family.
Not if this is your time hand- coding, you'll notice Dreamweaver does something pretty nice for us. As we started typing, it gave us this really nice long list of properties that could set for our CSS. By continuing to type, that list gets smaller and smaller and smaller till when we get to this point, the only available option is font-family. If I hit Return, notice that it's going to go ahead and autocomplete that for me. And it's going to complete the syntax of the colon there for me. So I don't really necessarily have to remember to do that. The other thing that it does for me is it starts giving me other pieces of my interface.
So you see here, we have all those predefined font stacks. Now I want to custom font stack here. So I'm going to do this on my own. What I'm going to do now is in quotation marks I'm going to type in "Franklin Gothic Medium," all capitalized there and then close my quotation marks. So why the quotation marks? Well, if your font name includes more than one word, it needs to be in quoted in quotation marks. Otherwise, you don't need them. Then I'm going to do a comma and then Arial Narrow Bold.
Now spelling and capitalization count here. When your machine looks for this font, it's going to look for a font that is spelled exactly the same way, capitalized exactly the same way, so you want to be really careful with that. Then another comma. Then I'm just going to do Arial and then another comma, and then I'm going to do sans_serif. So that's a custom font stack. That's me building one. I'm not necessarily sure whether I have Franklin Gothic Medium installed on my machine. It does not matter. It's going to add that as the first option there. So I'm going to go ahead and do a Save All. Switch back to Design view.
And now I notice my headlines here changed to that sans serif font. So that's exactly what I wanted. Now we have our items displaying in exactly the font we want while giving ample options for users who might not have that exact font installed on their machine. Notice how easy Dreamweaver makes this process by giving us multiple default family declarations, and giving us an easy way to create our own font stacks. Now I just want to pass on a little bit of additional information here. If you're looking for some good online resources, the site codestyle.org has a great article on building better font stacks, where they list commonly installed fonts on systems, and list a few examples of font stacks that go really well together.
So I definitely advise reading more about that. The other thing that I want to mention is that there are other options for using fonts that you want. CSS3, which is the new specification of CSS, contains a property called @font-family. That allows you to point to a font that is hosted on a server online so that it doesn't have to be installed on the client machine. There have been some various murky legal issues surrounding that, and one of the things that's starting to come out is that we're seeing a brand-new service online, where companies are hosting fonts for you to use for a small fee that you can use within your site.
So if you're interested in a different approach, I would definitely advise you to read up on @font-face, so you can learn what it can do for you within your CSS.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.