Fonts on the Web [duplicate]

Question

This question already has an answer here:

• How to embed fonts in HTML? 6 answers

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

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 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.

Answer 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.

Answer 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.

Answer 5

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 6

CSS2 offers:

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

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.

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 8

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.

Answer 9

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 10

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.