@font-face V's sIFR

serpico posted this at 12:55 — 1st February 2010.

Joined: Aug 2008

OK guys, pretty simple really, I have a client who wants non-web safe fonts on their site and I'm not sure which road to go down; @font-face or sIFR. Can anyone give me some pros and cons for each.

Many thanks!

serpico

Megan posted this at 16:52 — 1st February 2010.

She has: 11,421 posts

Joined: Jun 1999

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.

Megan
Connect with us on Facebook!

toddgoolsby posted this at 02:31 — 5th February 2010.

They have: 1 posts

Joined: Feb 2010

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.

webwiz posted this at 04:31 — 10th February 2010.

He has: 629 posts

Joined: May 2007

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.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

serpico posted this at 09:04 — 12th February 2010.

They have: 121 posts

Joined: Aug 2008

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!

serpico

Megan posted this at 15:14 — 12th February 2010.

She has: 11,421 posts

Joined: Jun 1999

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.

Megan
Connect with us on Facebook!

webwiz posted this at 04:38 — 14th February 2010.

He has: 629 posts

Joined: May 2007

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.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

Megan posted this at 16:07 — 14th February 2010.

She has: 11,421 posts

Joined: Jun 1999

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.

Megan
Connect with us on Facebook!

webwiz posted this at 23:00 — 17th February 2010.

He has: 629 posts

Joined: May 2007

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.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

webwiz posted this at 21:15 — 25th February 2010.

He has: 629 posts

Joined: May 2007

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.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;