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.

And there's also good information on [How to use web-fonts legally?](http://stackoverflow.com/q/1805324) (especially the Google Fonts answer) — Pekka, Dec 31 '11 at 23:22
You *must* be kidding. Every single of the questions above contain a full answer to this with everything you need to know. — Pekka, Dec 31 '11 at 23:36
Pekka squirrels out _three_ useful links for you and _that_'s how you choose to thank him? o_0 — sarnold, Dec 31 '11 at 23:53
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. — Kevin, Aug 19 '08 at 15:29
Good designers can make do with [boring fonts](http://en.wikipedia.org/wiki/Web_safe_fonts). :) I'm hoping that Android will displace the Microsoft monopoly of fonts with [Ascender Droid](http://groups.google.com/group/chromium-discuss/browse_thread/thread/0ac1fecd0dc4e175#). Otherwise we're pretty stuck. @font-face is far far future stuff for mobiles. — hendry, Sep 10 '08 at 15:40
See also https://stackoverflow.com/questions/2969323/non-standard-fonts-in-web. — Ry-, May 03 '14 at 18:10

score 20 · Accepted Answer · edited May 03 '14 at 17:51

20

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:

edited May 03 '14 at 17:51

Ry-

199,309
51
404
420

answered Aug 19 '08 at 14:22

Ian Oxley

10,460
5
39
48

1

It is possible to use @font-face for IE and Opera too. There are link to article and font converter. http://randsco.com/index.php/2009/07/04/cross_browser_font_embedding http://code.google.com/p/ttf2eot/ – Michas Feb 12 '10 at 20:14
2

Not upvoting this because stackexchange discourages link-only answers. Thanks for pointing out the @font-face css feature anyways. – Afr Feb 23 '14 at 10:34

score 11 · Answer 2 · answered Aug 19 '08 at 16:51

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.

score 3 · Answer 3 · edited Apr 02 '13 at 15:27

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.

edited Apr 02 '13 at 15:27

JSW189

5,931
10
39
70

answered Aug 19 '08 at 16:42

Tim

4,384
3
32
49

Ry- · Answer 4 · 2014-05-03T17:49:48.613

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.

score 2 · Answer 5 · edited May 03 '14 at 17:56

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!

score 1 · Answer 6 · edited May 03 '14 at 17:52

1

CSS2 offers:

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

edited May 03 '14 at 17:52

Ry-

199,309
51
404
420

answered Aug 19 '08 at 14:18

Sven Hecht

1,318
1
16
23

that's interesting, is it working with all fonts? – Drake Nov 01 '09 at 14:14

score 1 · Answer 7 · edited May 03 '14 at 17:55

1

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.

edited May 03 '14 at 17:55

Ry-

199,309
51
404
420

answered Aug 20 '08 at 14:54

John Sheehan

74,152
28
154
191

score 1 · Answer 8 · edited May 03 '14 at 17:55

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.

score 0 · Answer 9 · answered Aug 19 '08 at 14:22

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.

score 0 · Answer 10 · answered Aug 26 '08 at 17:21

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.

Fonts on the Web

10 Answers10

Linked

Related