Fonts on the Web [duplicate]

Solution 1:

Safari, and to a lesser extent, Firefox 3 have support for @font-face in CSS, which lets you use custom fonts. You need to have the appropriate licence to distribute the font files though. These articles explain it in more detail:

• http://www.css3.info/preview/web-fonts-with-font-face/
• http://www.alistapart.com/articles/cssatten
• http://www.sitepoint.com/blogs/2008/07/30/custom-web-fonts-pick-your-poison/

Solution 2:

This is a timely thread; we switched to Arial because Calibri is WAY small compared to all the other fallback fonts! It pained me greatly to switch to (gag) Arial because it's a crap copy of Helvetica:

http://www.ms-studio.com/articles.html

The sizing difficulties (too big if you go with a "c" font as your standard; too small if you go with something normal) are described in detail here:

http://neosmart.net/blog/2006/css-vistas-new-fonts/

I will miss Calibri's beautiful hand-tuned RGB aliasing a lot, but it was just impossible to deliver a good experience for most users without demanding Calibri be installed. It's reasonably common, as it comes with Office 2007 (Win/Mac) and of course Vista.. but it's far from universal, so it's a little irresponsible to rely heavily on it for a global web audience.

Solution 3:

You can of course use SIFR.

This degrades gracefully in browsers that do not support it and is accessible.

It's not really suitable for using on loads of text but for headings and highlight text it's perfect.

Of course this is a work around to an intrinsic limitation of browsers and the web at this time, but when was this not the case for the majority of web technologies and techniques.

Solution 4:

You can do that with the new @font-face declaration available in CSS3. It has very good support for a CSS3 feature (i.e. since IE4), too.

The general syntax is:

@font-face {
    src: url('path to your font') format('woff|ttf|svg|eot|…');
    font-family: the name to use;
    font-weight: an optional weight;
    font-style: an optional style;
}

There's also a generator available that converts the font to multiple formats and creates the appropriate CSS.

Nowadays, I would recommend providing only a WOFF file; it’s convenient, easy to create.

Also, make sure to quote the name of the format (e.g. format('woff')); it won’t work on Firefox otherwise.