A lot of folks are whining and moaning because Dreamweaver CS4 now enforces the use of CSS styles rather than HTML attributes for formatting. One of the things this means is no more font tag (and its related attributes).

That’s a good thing in my book. No more code like this:

<p><font color=”#003399″ size=”5″ face=”Tahoma, Geneva, sans-serif”>paragraph 1…</font></p>

<p><font color=”#003399″ size=”5″ face=”Tahoma, Geneva, sans-serif”>paragraph 2…</font></p>

<p><font color=”#003399″ size=”5″ face=”Tahoma, Geneva, sans-serif”>paragraph 3…</font></p>

Well you get the idea!

But CS4 has a dirty little secret and , against my better judgement, I’m going to reveal it:

IT’S STILL POSSIBLE TO USE THE DREADED FONT TAG!

The secret is CS4′s Wrap Tag… and Edit Tag… commands, both of which are accessed from a pop-up menu that appears when you right+click on a selection in the Design window. Here’s how it works:

1. In the Design window select some text.
2. Right+click on your selection and select Wrap Tag… from the pop-up menu.
3. In the Tag Editor dialog type in <font> (or choose it from the tag list) and press the Enter key twice (once to “set” th tag and once to dismiss the dialog). The text will remain  selected.
4. Right+click once again on your selection and select Edit Tag <font>… from the pop-up menu
5. In the Tag Editor – font dialog, make your selections for Face, Size and Color and click OK.

If you look at your code you’ll see something like this (shudder):

<font color=”#FF0000″ size=”+2″ face=”Tahoma, Geneva, sans-serif”>content</font>

That’s all there is to it.

To edit an existing font (or some other HTML) tag:

1. Select the entire tag by clicking within the tag in the Design window AND then selecting the tag from the tag listing in the status bar at the bottom of the Document window..
2. Right+click on your selection and select Edit Tag <selected tag>… from the pop-up menu.
3. Edit the tag attributes in the Tag Editor dialog and click OK.

Just don’t tell anyone I told you how to do it.

As always, feel free to comment here or email me with your questions, comments and suggestions. And please follow me on Twitter (DWcourse) for additional Dreamweaver news and tips.

I recently receved this question from John via email:

You stated that Webdings were part of the Microsoft Core set of fonts that are pretty safe to use for web design….Pat had been saying for awhile that her hearts were not working on her website … and I would go and check and they were fine. When you mentioned the other day about viewing sites in different browsers,  I opened in FireFox and there was the problem. It turns her webding hearts into Y’s…

I am going to have to remove them … would you agree?

John, thanks for pointing this issue out. Since I don’t normally use Webdings, I hadn’t been aware of it.

Beginning with version 3, FireFox has made changes to the way it displays font characters that essentially break the Webdings font. There are valid reasons for doing this (there’s a discussion here…) but so far, those reasons haven’t convinced any of the other major browser makers (where Webdings continues to work).

The bottom line is this. Webdings is a dozen years old and encoded in a way that doesn’t play well with emerging web standards. Given that fact it’s unlikely that FireFox will change its ways and return to supporting WebDings. It’s also likely that other browsers will also eventually “break” Webdings. So, if you’ve been using the font in your web pages, it’s probably time to come up with another solution.

Since Webdings is essentially a graphic font the simplest solution is – as John suggests – to instances where you’ve used the font with images (and don’t forget to include a descriptive alt tag).

It’s just another case of evolving web technologies and standards rendering our “old” ways of doing things obsolete (think replacing HTML attributes with CSS styles and tables with divs) and it won’t be the last!