Join Joseph Lowery for an in-depth discussion in this video Declaring @font-face families, part of Dreamweaver CS5: Getting Started with HTML5 .
- View Offline
The key to web fonts is the @font-face declaration. This small bit of CSS code allows you to incorporate nonstandard fonts into your page. Let me show you how it works. So I have here the fonts.htm, and what we are going to attempt to do is to change this h1 that we see here--Our Mission: Who we are--into something a little bit more fanciful. I am going to go to the main.css, and we are going to go ahead and open it up all the way into Code view. We are going to go to the very top of the page and then come down a little bit past all the comments, right to where the html body tag declaration is, and create a new line.
And this is where we are going to put our @font-face declaration. So that is with the @ symbol, followed by font-face, and then an opening curly brace, a couple of lines, and a closing curly brace. Now, within that the first thing you do is declare what font family you want to link to. I am going to put in the font-family property just as you would normally, but instead of one of the existing font-families that I have set up in Dreamweaver, I am going to go ahead and add in a new one, and this one is called DragonwickFGRegular.
It's a free font in the public domain. And now that that's in, I will put a semicolon, and we will add our second property, which is an src or source property. This will be linked to a embedded open type font, which is recognized by Internet Explorer. Now, because I'm self-hosting my fonts, I am going to go ahead and choose a URL that is local, and I will open up my Files panel. In the 06_02 chapter, I will open up _ fonts folder, and we will see all of the fonts available there.
So now I'm going to go ahead and enter the path to that. Keep in mind that I'm in the _css folder, so I am going to have to go up a level first. I will start with a single quote and then ../ to move up a level. And now we will go to the fonts directory, and finally we will put in the file name, which is going to be dragwifg-webfont.eot.
Now, we will close out the single quote and the parenthesis and end that with a semicolon. As you can probably guess, not all browsers support all font formats, so you do have to use multiple formats to include them in the @font-face declaration. So besides the embedded open type font that we see here, we also need to put in one for TrueType and one for the Web Open Font Format, or WOFF.
In order to do that in such a way that Internet Explorer doesn't load all of these fonts, we have to resort to a little bit of trickery. This technique that I am about to show you is called the bulletproof technique, and it was first started by a gentleman name Paul Irish. So we enter in another src, and this one, instead of url, is local, which means to look on the user's local system. And now instead of putting in a recognizable family name, we want to do exactly the opposite. We want to put in a file name that could not possibly be one of these fonts.
So I am going to put in an exclamation mark and then close it with a quote and a closing parenthesis. Paul Irish uses a smiley face, but an exclamation mark works just as well, and then we will follow that with a comma. And on the next line we will put it in the path to one of our other font formats. In this case it's going to be the Web Open Font Format, or WOFF format, and I am going to copy this path and file name and then paste that in, followed by woff.
Close off the single quotes and the parenthesis, and then put in a format attribute with the value being woff. And finally, we will repeat this as truetype. Now I'm ready for my semicolon. And now we've declared the font-face. We need to go down and put it specifically in the selector that we want to apply it to. So let's go back to Split view. Here is my h1 tag. I am going to go and open up the Styles panel.
And now that I have #maincontent h1 selected, I can choose the Go to Code by right-clicking on that name there. And here's our font family, and we can put in our font name, which if you'll recall--I am just going to go ahead and put it in quotes--it was DragonwickFGRegular, and follow that with a comma, so that we have a series of names. So let's go over to Design view now, and the page automatically refreshes, and there you can see our Dragon Wick Font very zippily presented.
If you are a web designer who has been working for some time, you probably are feeling a great sense of relief right now, because now the whole world of fonts is open to you.
- Updating Dreamweaver CS5 to support HTML5
- Developing for mobile devices and tablets
- Understanding enhanced structural tags
- Creating a basic page layout
- Drawing with the canvas tag
- Implementing CSS3 type effects
- Setting up styles