Join James Williamson for an in-depth discussion in this video Reviewing support for web fonts, part of Dreamweaver CS6 New Features.
- View Offline
Over the last few releases Adobe has increased Dreamweaver's support for web standard technologies such as HTML5 and CSS3. That trend continues in CS6 as Adobe adds support for web fonts through its new Web Fonts Manager. And I want to demonstrate that for you through our Roux Academy site here, which I've opened up the index.htm file, which can be found in the 01_05 directory. Now the first thing I want to mention about this is the Web Fonts Manager that I am about to show you guys is actually a site wide manager of web fonts.
So once you start adding web fonts to the site manager, they're going to be available to you no matter what site you're using. So it's kind of a Dreamweaver specific feature that's going to work regardless of which site you are working in. So if I go up to Modify and I choose Web Fonts, it's going to open up the Web Fonts Manager. Now of course it's empty right now because we haven't added any fonts. So one of the things that you're going to need to do prior to adding fonts to your Web Fonts Manager obviously, is go download some web fonts. So you can find those in a couple different locations if you've never worked with them before.
Now there are a couple of different places that you can do this. One of the places I recommend you start off, if you've never worked with web fonts before, is fontsquirrel.com. This allows you to browse a ton of free fonts that are available to you online. It contains dozens of free fonts that you can use on your site. It also will generate all of the different font formats that you need through the use of the @font-face Kits that it can create for you. This is one way to do it. There are also a lot of different commercial services out there where you can go purchase fonts for download and download them and use them locally. So of course the Web Fonts Manager that we are talking about in Dreamweaver is for solutions where you're going to be hosting the font yourself on your own server.
So I am going to go back to the Web Fonts Manager and I am going to start importing some fonts for use on my site. So the first thing I am going to do is just add a font and it doesn't have to be in your site definitions. It's going to copy over all the files that you need for you and it's going to place it in the directory that you tell it to. So the first thing that I am going to do is, I am just going to go ahead and browse out for a font. Now you don't have to worry. You might look at this and say, boy, that looks really tedious. You're not going to have to worry about downloading each one of these. If you point it to a folder that has one of these fonts in it, it'll pick up the other ones automatically.
So I am going to browse out. Actually, if you go directly inside the Exercise_Files folder you're going to find a folder called assets, and if I open that up, you can see that I have fontfacekits that I've downloaded for both bitter and Droid-Sans. So I am going to open up the bitter- fontfacekit and you can see I have three different versions of that here. I have the Regular, Italic, and Bold. I am going to go ahead and select Regular and open that up, and you see that it goes ahead and assigns the font a name, if it can sort of pick it up from the font files themselves, and then it points to the relevant fonts. The Embeddable Open Type fonts, the WOFF, the TrueType, SVG, and one of the things that you're going to have to do before Dreamweaver will let you use this particular font inside Dreamweaver is to check this little box that says I have properly licensed the font above for web site use.
Now that means that you've either purchased this font through a vendor or it's an open-source font that has a license that allows you to use it. And one of the things that you should always check before you download one of these fonts and use them on your site is, does the license allow you to use it? Now both of the fonts that you're seeing here have the Open Type SIL license that allows you to use and distribute the font. So you definitely want to double-check that. Now the font name is the name that you're going to be referencing in your CSS when you ask for this particular font. You might want to make sure that the name is easy to type. I am just going to remove the space.
That way I don't have to worry about encasing the font name in quotation marks that sort of thing. Then I am just going to go ahead and click OK. So you can see that now it's available to me and I just keep doing that process. So I am going to keep adding these fonts and I am going to do that a little bit quicker this time. Again, I am going to go out to the assets folder, I am going to find this time the Italic version of that, again I am going to remove that space, click OK. I am going to browse out and find the Bold version of it. By the way, you don't have to remove that space.
It's just a personal preference of mine. Then I am going to start going into the Droid-Sans font as well. So you see that once you know where these fonts are and what you're doing, you can go through this pretty quickly. Now if I am going through it too quickly for you, feel free to pause the video, and make sure that you understand all the steps that we are going through. Now I am going to go ahead and click OK, and then I am going to click Done. Now what this is going to do is right off the bat, really nothing.
So notice when I click Done, nothing really happens to my site. If I refresh it, if I change it in any way, no fonts have been added to my site at all. Well, remember that Web Fonts Manager is really for Dreamweaver itself through whatever site you're working with. So if I go back to my site definition, and I can do that by just double-clicking on the name of the site right here in the Files panel. In the Advanced Settings it's going to ask you about how you want to manage your web fonts, where do you want to place those? Of course, this is unique to this particular site. So you'd want to do this for every site as long as you didn't want to accept the default.
Now the default would be to place them in a directory call Web Fonts. There is nothing wrong with that whatsoever. But I typically name all of my asset folders with an underscore just so they sit up at the top and I know it's not a subdirectory of the site. I know that it's asset file. So I am going to change that, and I am just going to go ahead and change that to _fonts, just to keep it in line with what I'd typically do. So I will save that, again if I refresh the site, nothing happens here. So that's probably going to be the first thing that confuses a lot of people. They go through all of these steps, they choose a directory, they tell the Web Fonts Manager to add fonts to their site and then nothing happens.
Well nothing is going to happen until you actually use the fonts. So let me kind of show you how that works. So I've got the file open here. I am just going to click anywhere in the file and using my tag selector I am going to go down and select the body tag. One of the things I'd like to do is make sure that the default font for the site is Droids-Sans and the easiest way for me to do that is to just apply that font to the body and let every other element on the page inherit that. So I am going to click body to make sure I have selected the body, and then in the CSS, I want to change my Font Declaration. So I am going to make sure that my Targeted Rule is body, and remember you can also go up through this, and you can choose which body you want.
I've actually got two in here. I've got one that's sort of general generic body rule, then I have one that's in layout styles, and I know the difference between the two of these, of course because I wrote the CSS. So I am going to select the top body and make sure it's applying to that rule. Now the next thing I can do is I can grab the fonts from the pulldown menu here and you can see I have a list of all the fonts we added earlier. Now if I want I could just go ahead and select one of those, but frankly I want to apply these fonts in a way that gives a fallback font in case something goes wrong. Perhaps that particular browser or device doesn't support web fonts, maybe I didn't host the font properly or forgot to upload it or maybe my server is just having an off day.
So you want to give them a fallback the same way that you'd do with any of these guys. So the really cool thing that you can do here in Dreamweaver is you can edit those font lists. So I am going to go ahead and edit it, and I am going to scroll down in my Available fonts. If I go all the way down to the bottom I can see those web fonts that we've added. So I am going to add DroidSans over there and then I can just add some of say the normal fallback fonts, if you will. I will go ahead and do Arial as well while I'm at it, and then maybe sans-serif. So I will go down towards the bottom to add the sans-serif. Now I can keep going here.
I can also add another font list and you've probably done this before inside Dreamweaver, I am guessing. I am going to select BitterRegular here and push that over and then I will choose a font like say Georgia as a fallback font, and then maybe go down to serif. Now I can choose whichever one of these I want and I can move these up the favorite list if I want, if I know that I am going to be choosing it a lot. I can crank that up towards the top and I can do the same thing here, with Bitter I can move it up towards the top too, just to make them a little bit easier to select.
Now for the body, remember I want DroidSans. So by selecting this one, not only am I applying the font and that's certainly true of everytime you select it, but the first time you select it, what Dreamweaver is going to do for you, if I go ahead and click OK you will see this. Now before we see any physical change to the site, I need to actually apply the font. You will notice that looking at the CSS panel that I didn't actually apply the font there. All I did was really edit my font list. So Dreamweaver sometimes will do that to you. So I am going to grab my font pulldown menu again and there is DroidSans, Arial, sans-serif and I am going to select that. Now I can see that that's been applied. Awesome! Now if I do a Save and come back over to Files panel, if I refresh my files, you can see right inside the root folder I have that _fonts directory.
That's what I asked for and if I look inside that, I can see that there's a folder for DroidSans. Inside that I can not only see all of the DroidSans fonts that I asked for, and the various fonts formats, but I see a stylesheet and this is one of the places where this workflow is either going to work for you or it's not work going to work for you. So basically in order to enable the use of these fonts on the site, you're going to have this external stylesheet that's going to have the @font-face declaration in it for that particular font. In this case, DroidSans. In your main stylesheet or the stylesheet that you had applied, you will not only see the font declaration and you'll see here there's the body selector with DroidSans, Arial, and san-serif applied, but if I go all the way up to the top, you can see now I am importing that stylesheet.
So I think you can see here maybe some of the things that you'll need to really think about before you follow this workflow. For one, you're going to link to an external stylesheet for every single font you're going to be using and that can be a little bit problematic. Especially since you're going to be basically importing it in and making multiple requests for it, so that can add a lot of overhead to sites, especially sites that are going to be used on mobile devices. Once you've done the first font, every font after that will also be saved into that fonts directory. So if I go back in the Design View, scroll up, and let's say I select this paragraph here.
So I am going to go ahead and make sure I am targeting the rule p.branding there. Once again I go down in my font and I grab that pulldown menu, I can choose that BitterRegular. So I select that, do a Save All, and again if refresh, now I can see BitterRegular and if I go into Live view, I can see that it's using Bitter there. Now again carrying this through, you can see I have another stylesheet added now. Now I have BitterRegular and both of those are being imported into my CSS file. Now if you're familiar with web fonts, you could go ahead and copy and paste the @font-face declaration here and in this file as well, and add them to your main.css.
You would of course need to make sure that the relative path to the files themselves are correct, because right now, remember they're in the exact same directory. So you don't have any directory structure added here. So if you're going to copy and paste to move that around, keep that in mind. You'll notice that the other deficiency that this workflow has is you need to do individual declarations for different versions of the font. Different weights such as the bold font or italic, the style, regular, that sort of thing. Whereas if you're writing the syntax yourself you could go ahead and use the same font name and add the weight and style to it so that your declarations are using the proper version of the font whenever you bold and italicize it.
Otherwise, you have to remember to do a font family declaration for things like strong tags and emphasis tags, so that you're getting the true italic characters or the true bold characters and not getting faux bold and faux italics. So that is one thing you will need to consider as well. I also want to point out that this particular workflow only works if you're assigning the fonts in Design view. If, for example, you are one of those people, like I am, that loves to hand code; if I was to come in for example here to my footer column and just say font-family and then do Bitter.
If that's the first time this has been done, it's not going to copy the fonts over, and it's not going to add the declaration to the top of my styles and it's not going to work. So I've got to bring them over first before I can start hand coding the styles myself. So there's a very narrow specific workflow here. So if you've never worked with web fonts before, Dreamweaver's new web fonts support can make it a lot easier for you to add web fonts to your sites. Now the workflow is not going to be perfect for everyone, but remember this is the first generation of web font support in Dreamweaver. With Adobe's recent acquisition of Typekit, I expect to see many refinements to web fonts support in upcoming versions.
- Exploring the interface changes
- Reviewing the FTP enhancements
- Using the new image optimization workflows
- Applying multiple classes
- Applying CSS transitions
- Taking advantage of the jQuery Mobile theme support