Using the font tag in Dreamweaver CS4

by James Cook on August 3, 2009

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.

{ 15 comments… read them below or add one }

john nagy February 7, 2012 at 10:02 am

I am creating html code for Blackboard Learn and it prefers font tags/inline fonts. So removing this from Dreamweaver has proven an added challenge to code that work best for this application.

Reply

dwcourse March 3, 2012 at 10:54 pm

It’s also a problem if you’re creating html emails but, as this page shows, it’s still possible. And, since the font tag isn’t considered good practice anymore for web pages, I believe Adobe was right to delete the feature. (BTW, I’ve never been a fan of Blackboard)

Reply

Ben Palmer April 15, 2011 at 8:35 am

Great, the only way to do html emails to ensure it works on all ****** readers. Brings memories back this.

Reply

Bryn Kaufman January 7, 2011 at 9:44 am

Thanks, I am working on some Craigslist Ads, and as they do not support CSS the font tag is the only option and your solution makes it easier.

Reply

JLeonard September 21, 2010 at 2:49 pm

You don’t know how THRILLED I am to find this work-around. Thank you! Despite inline fonts being “deprecated,” I still agree with Stephen Smith above: to create a CSS style for a single word or letter change is frustrating (and I, too, couldn’t understand for the life of me why CS4 was forcing this!) I get that you’d have the style for future use but… that means there could be hundreds of tiny, little, one-time-use CSS styles! (Blue bold 10px left, blue bold 10px centered, blue bold 10px right… times the number of different sizes you want to use, times the number of different colors, times bold, and not bold, and italic, ARRRGH!!) And, what if I’m creating a page for someone else, who will not have access to my CSS? I’ve just had this experience trying to force a special table using Joomla for another person’s site. I cannot modify their CSS for one simple table. I’m a lame designer and I know it, and I’m GRADUALLY gaining an understanding of CSS, but sometimes if you need a one-time fix, inline styles still rule!

I will be taking some CSS courses, but as you stated, that can take years to learn! For quick, simple fixes, I don’t have weeks to figure it out! Thanks again!

Reply

Amy April 23, 2010 at 7:42 am

OK – i am a graphic designer turned – apparently by demand – an html email designer! I am struggling with inline styles. I THOUGHT i just created an email in dreamweaver with inline styles and they tell me now its css. How DO YOU EXACTLY create an inline style for fonts? Everything i search shows you css (which i pretty much get BTW) but cant use for email campaigns. Do I try the workaround you mentioned at the top post? Thanks so much – Amy

Reply

jcook April 23, 2010 at 8:24 am

Inline styles (an example is

are CSS but you CAN use them in emails. You can set other font properties the same way. If use the font-family property, limit yourself to the core set of fonts found on most computers.

BTW, this article has some more tips for creating HTML emails: http://groundwire.org/support/articles/css-and-email-newsletters

Reply

shan February 6, 2010 at 5:56 am

Teaching people how to continue using DEPRECATED MARKUP, is not a good idea… mho… and I’m not a CSS expert, (just a hobbyist struggling and wrestling with BUILDING websites). But CSS CAN be learnt. I did so, by just googling and finding kazillions of CSS tuts on interent. Also picked up a book or 2. I highly reccommend the following books: Russ Weakley’s “Sams Teach Yourself CSS in 10 Minutes”and e.g.: : Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition”by: By Ian Lloyd. And to be honest: CSS is realy fun (sort of a puzzle).

Reply

jcook February 6, 2010 at 8:23 am

I don’t recommend using deprecated markup but there are situations (making updates to old pages, etc.) where iit can be justified. When I’m teaching I always stress using CSS which, I admit, can be fun in a geeky sort of way. Still it takes a lot of time and effort (much more than 10 minutes) to master. I’ve been using it for years and I’m still learning!

Reply

Fay August 17, 2009 at 9:33 pm

Alas, emails (like used by online email marketing) don’t all support CSS. I just got CS4 and was stuck trying to find the ‘old’ way. And then had to try and remember how to do the ‘old’ way. sigh.

but thanks for posting this solution, it is still needed.

Reply

jcook August 18, 2009 at 9:38 am

It’s unfortunate that email programs aren’t keeping up with browsers.

Reply

Fay August 18, 2009 at 11:00 am

I have a bit of a red face here…I’ve just read the online manual for Emma, the email service I’ve started using, and here’s what they say:
“To ensure your styles carry through when viewed in someone’s inbox, it’s best to write inline styles within the or tags. Here are a couple of examples:

(div styles and td styles shown here)

Font tags are quickly being phased out by the email environment, so it’s best to avoid them altogether. Web browsers and email clients are moving to CSS and inline styles like the examples above.”

so there ya go; maybe I don’t have to retro-learn any more after all.

Reply

jcook August 18, 2009 at 11:22 am

Good news! And don’t be embarassed, I learn stuff everyday that’s old news to everyone else. BTW, CS4 makes the creation of inline style relatively easy.

Reply

Stephen Smith August 7, 2009 at 7:45 am

Thanks JCook. I’m going to try your workaround for using the font tag. I just moved from DW8 to DW CS4 and was thinking I was crazy because for the life of me I couldn’t figure out how to change font size in CS4. I understand CSS somewhat, but it doesn’t make sense (to me, anyway) to have to create a new CSS class or ID every time I just want to change the size of one word.

Reply

jcook August 7, 2009 at 8:00 am

I’d still encourage you to continue learning CSS. I know it seems like a lot of effort to change just one word but consider that if you create a style (say .special) and apply it to that one word, it also becomes available for future use. Then, say you use it on 10 words throughout your site. To change them all only requires changing one line of code in your style sheet (no searching for all the instances, no updating all the pages).

In addition, well constructed CSS-based sites are much easier to make design changes to.

Bottom line is there’s little harm in “cheating” with a font tag occasionally with the font tag but it is poor practice and eventually may cause problems.

Reply

Leave a Comment

{ 1 trackback }

Previous post:

Next post:

Home | Free Dreamweaver Mini-course | Make Contact