Embedding fonts

I'm creating a website and would like to use the true type font Myriad Pro Condensed for my headings and navigation menu (in actuality I would rather use Myriad Pro Semibold Condensed but DW doesn't even see that that font exists on my computer). I'm making the site with Dreamweaver CS3 on a Mac and it previews fine in the program but when published it defaults to Times New Roman. I realize I need to make the font a .pfr file and embed it in the site, but cannot figure out how to do so. I'm looking for some sort of shareware or trial version to convert the font but cannot find anything. I keep hearing about Typograph 2 and TrueDoc but see no way to download/use these programs.
Who is Participating?
there are also server side solutions written in php or asp which will do the font substitution for you on the server, generate and image and place it directly into the html markup for the user to see. This is far more reliable and works on any browser that displays images.

Do a google search for 'php image replacement'. I believe there is a good link for it on www.alistapart.com

good luck!

As you probably know, for a font to display in a client browser, the client computer MUST have that font installed. Site visitors who does not have it installed will not be able to see the text in that face. There's no easy way around this. Microsoft tinkered with WEFT (the embedded fonts you reference: http://www.microsoft.com/typography/Web/embedding/weft3/default.htm), but development of that stalled a few years ago, and never was a reliable solution for most sites - it only works in IE, so that mean's something like 30% of your visitors will not see it.

However, there IS a technique using flash to substitute fonts but it's tricky, and has it's own drawbacks. The technique is called sIFR (scalable Inman Flash Replacement). Essentially, you replace short bits of plain text rendered in the default or CSS-specified font with text rendered in your selected font by a combination of javascript, CSS, and Flash.

Here's the official page of the original sIFR, with more information, how-to's, and links:

Since then, sIFR has evolved, and the latest is version 3:

Some drawbacks:
1) Limited to those with flash and modern browsers (due to the CSS and JS needed to implement it - but remember that using this technique, users who are unsupported still get the text specified by HTML/CSS prior to replacement). Flash is well-supported these days; JS, even in supported browsers, may be turned off in some instances. Flash may be limiting in accessibility. The bottom line is know your audience.

2) In some cases, Flash areas can be "sticky" and not allow scrolling via mouse wheel (user annoyance factor).

4) Text cannot be selected (for copy-n-paste, for example). This may not always be a bad thing.

5) Loading times in the font-replaced areas may be increased. The more you use it in a page, the more of an issue this can become.

6) The original sIFR doesn't work properly on clickable link text (I believe this is resolved in sIFR3)

None of these are necessarily show-stoppers, just tradeoffs (like many others we make as we design web pages) that you should be aware of.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.