Fonts on the Web

Question

The collection of fonts available to a web developer is depressingly limited. I remember reading long ago about TrueDoc, as a way of shipping fonts alongside a website - but it seems to have languished. Has anybody used this, or something similar? Is it supported by enough browsers? Am I missing a good solution?

Note that a responsible web developer does not use fonts that are only available on Windows (and especially ones that are only available on Vista), nor do they use a technology that isn't supported by at least the majority of browsers.

---

Update: As several people have pointed out, there's nothing wrong with providing a list of fallback fonts for people who don't have the specific font you use. I do in fact always do this, and didn't mean to suggest that this was wrong.

While my question was badly phrased, what I meant was that a designer should not make too many assumptions about what the client will have available. You should plan for how all users will see your site, not just for people using your own preferred setup.

Answer 1

StackOverflow uses some Vista fonts...

Shhhh...

Answer 2

css2 offers:

@font-face { font-family:Garamond; src:url(garamond.eot), url(garamond.pfr); }

Answer 3

Note that a responsible web developer does not use fonts that are only available on Windows (and especially ones that are only available on Vista), nor do they use a technology that isn't supported by at least the majority of browsers.

Well… You can, as long as you know how it will render on non-Vista/non-Windows OS.

Otherwise: yep, @font-face in CSS2 is the best standard alternative, even if it is not widely supported.

Answer 4

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/

Answer 5

@Ian Oxley

So basically, the answer is still "not yet"? From reading those links, Safari has it, Firefox plans to have it in version 3.1, and IE is still lodged on something proprietary.

Answer 6

Maybe it's a good thing that fonts are limited. I don't even want to imagine what horrible fonts people would use for websites if given the choice.

Answer 7

Note that a responsible web developer does not use fonts that are only available on Windows (and especially ones that are only available on Vista), nor do they use a technology that isn't supported by at least the majority of browsers.

There's nothing wrong or incorrect about using Windows/Vista-specific fonts provided you gracefully degrade to a widely-available font. For example:

font-family: Calibri, Tahoma, Helvetica, Sans-Serif;

In fact that's the whole point!

Answer 8

You can of course use SIFR http://www.mikeindustries.com/blog/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.

Answer 9

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.

Answer 10

IE supports @font-face (it started out as their proprietary technology in MS Word). Here's a blog post from the IE team about it just about a month ago http://blogs.msdn.com/ie/archive/2008/07/21/font-embedding-on-the-web.aspx

Answer 11

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:

No no no - why on earth would you go to Arial just because your Vista fonts aren't the same size as the fallback ones? The site was fine as it was. It's not a problem if the text is different sizes in your fallbacks, that's just the way the web is.

I use XPSP2 and mac OS and I have never seen these fonts of which you speak - the Calibri and Consolas and whatever. But SO looked great and was easy to read. Your fallbacks were working exactly as they were meant to in the first place.

Why throw everything away in one go? Now it sucks but it sucks consistently!

Please put it back, this Arial is the worst compromise you could have chosen. Verdana or Trebuchet MS would be better than this, but the way it was before was best.

Answer 12

Note that a responsible web developer does not use fonts that are only available on Windows (and especially ones that are only available on Vista), nor do they use a technology that isn't supported by at least the majority of browsers.

I think this is rather missing the point. It wouldn't matter if you did; everyone would get something sensible that they could read easily, and the ones who need to can change the font to whatever they want anyway because it's just text and all major browsers let you customise the font you see regardless of the preferences of the site designer.

There is nothing broken about suggesting fonts in your CSS that some users don't have; they just see something different from you. Different is not broken. They won't even wonder why you're using default fonts because they won't know that other people see anything different.

This is the whole point of font sets;

"Verdana, Arial, Helvetica, sans-serif" - it's good practice precisely because it acknowledges that people will see different things

This is good practice too: "Gill Sans, Verdana, Arial, Helvetica, sans-serif". So most people don't have Gill - who cares? They get a perfectly good site regardless

And this would be fine too, but a bit weird and lazy

"Gill Sans"

Irresponsible web design is doing things like setting text as images without using alt text, not using interesting fonts in font sets.

Answer 13

I'd imagine any method of sending fonts with a web page would pose some sort of security risk. I have heard of methods where, in the case that the client doesn't have the required font, the text can be dynamically replaced with an image of or some sort a flash displayed. The only one like this I can find now is at AListApart but it may already be redundant. Said method would also require css, images and javascript to work and could be painful to implement across browsers.

Answer 14

Good designers can make do with boring fonts. :)

I'm hoping that Android will displace the Microsoft monopoly of fonts with Ascender Droid.

Otherwise we're pretty stuck. @font-face is far far future stuff for mobiles.