Okay. I fixed the "flash of

webwiz — Thu, 25 Feb 2010 21:15:01 +0000

Okay. I fixed the "flash of default font" issue. Here's how I did it for setting the "Home" link from my <div class="sitename"> of my pages:

CSS
----

/* if scripting is enabled, hide the site name before Cufon kicks in */
html.js  .sitename { visibility: hidden; }

HTML - in the <head>

  <script type="text/javascript"> // add class="js" to the html element 
  document.documentElement.className='js';
  </script>

HTML - just before the closing </body> tag -

  <script type="text/javascript">
  Cufon.DOM.ready(function() {
    if (!$.fontAvailable('Monotype Corsiva')) {
      Cufon.replace('#banner div.sitename a', {hover:true, textShadow:'1px 2px rgba(0,0,0,.25)'});
    }
    $('#banner .sitename').css('visibility', 'visible');
  });
  Cufon.now();
  </script>

If JavaScript is enabled, the <html> element gets a class of 'js'.
The CSS then turns off visibility of the sitename, even before the entire page is loaded.
Finally, after any font replacement with Cufon, visibility is turned back on.

No JavaScript - no turning off visibility, and the normal font stack substitution takes place.

Hope this helps someone.

I was wrong about Typekit. It

webwiz — Wed, 17 Feb 2010 23:00:10 +0000

I was wrong about Typekit. It uses JavaScript for Digital Rights Management. You are correct about the disturbing flash of default font, too.

Here's a rundown of Typekit and some alternatives in the latest Sitepoint newsletter that just came out.

Oh, right, it's hosted. Which

Megan — Sun, 14 Feb 2010 16:07:42 +0000

Oh, right, it's hosted. Which is a bit messy too because you're relying on their site being available and not slowing down the loading of your site. I think I read that there might also be a flash of the default font before the hosted font loads.

No, Megan. No JavaScript for

webwiz — Sun, 14 Feb 2010 04:38:11 +0000

No, Megan. No JavaScript for Typekit. It is a hosted font library that allows you to embed any of their fonts via the CSS @font-face rule. Basically you rent a font from them, customize the glyphs you need to reduce the download time, and then simply include the font name in a normal CSS font stack. User agents that don't support @font-face - most do - get one of the fonts lower in the stack.

You can try it out for free (limit 2 fonts at one site). You can rent the entire library for $50 a year. Seems like a bargain to me. (If you need a special font, that is...)

A regular image is a good solution, but can be costly if it's a specialty font with a commercial license fee. Flash is usually better quality, but is by no means universally available. SVG would be nice if only Microsoft would support it...

OTOH - Cufon that I mentioned is indeed a JavaScript solution.

That's one of the sites I was

Megan — Fri, 12 Feb 2010 15:14:00 +0000

That's one of the sites I was thinking of, serpico. I think there are others too (try searching).

I think with you're problem you need to either search for something about Adobe fonts available for embedding or contact them directly.

Oh, and some of these services (Typekit might do this, and there are others) rely on JavaScript or other weird tricks to embed the fonts. Or you have to link to a separate stylesheet on their domain. Still a bit messy.

Thanks for the tips. I've

serpico — Fri, 12 Feb 2010 09:04:18 +0000

Thanks for the tips.

I've found Font Squirrel has lots of free to use font packages for embedding.

I think I would much rather go down the CSS route. It just seems much cleaner, but the issues of lisencing are there to be debated. I can't find any difinitive guide to lisencing fonts for embedding. My client wants to use Avant Garde and Lubalin Graph, which I think are Adobe fonts.

Stuck!

todd has suggested possibly

webwiz — Wed, 10 Feb 2010 04:31:38 +0000

todd has suggested possibly the best solution - typekit is adding new faces all the time, at prices far lower than foundries usually charge. Another suggestion I have is to use Cufon - a sIFR replacement. You'll still need to have the font on your computer in order to create the code for the script-generated glyphs, just as you would to create an image or Flash file, but there are several advantages as the image behaves more like regular text.

I have a customer who is

toddgoolsby — Fri, 05 Feb 2010 02:31:41 +0000

I have a customer who is wanting the same thing... I found http://www.typekit.com/ and now the customer is whining about costs. I'm sure there is more out there, but maybe you can find a match there.

With sIFR you don't have to

Megan — Mon, 01 Feb 2010 16:52:58 +0000

With sIFR you don't have to worry about the lisence on the fonts. Because they're protected in the flash you can use any fonts you already have. The problem is that you have to hook them up using javascript which is messy, and they replace the normal text content which could be a usability problem with lots of text. Only good for headings really.

With @font-face you don't have to worry about messy scripts or usability problems (other than the readability of the font you choose) but you do have to worry about the lisence on the font. You can only use fonts available for @font-face embedding. There are a few sites that list them but I don't know what they are off hand.