Should you only use web fonts?

[WebDonkey]

I am converting a layout to HTML/CSS and the font used is 'Interstate'. What should I replace it with? Should I look for the most similar web font (any suggestions) or use some kind of font replacement function.

[ralph.m]

If the font is freely available on the web, you could consider serving it to users with CSS, via @fontface, but not all fonts are really optimized for this kind of use on the web, and @fontface is very raw and unrefined at the moment.

It would be better to identify a few fonts that are commonly available on most computers and that resemble the font you are using. Font support by browsers and font makers is not very good at this stage, but the landscape is rapidly changing.

[AtSea webdesign]

ralph is dead on.

Although this list is old it's still a good reference.
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

[AutisticCuckoo]

There is no such thing as universal fonts. I'm willing to bet that there isn't a single font in common on my Linux machine and a typical Windows system.

That's why CSS offers fallback lists for font-family.
Yes, there is also @font-face, but those of us on slow connections may not want to download an 8 MB font just to look at one site, so you should still use fallback lists.

[gary.turner]

There is no such thing as universal fonts. I'm willing to bet that there isn't a single font in common on my Linux machine and a typical Windows system.

What? You don't have Microsoft TrueType core fonts installed?

cheers,

gary

[Black Max]

If I remember some of our earlier conversations correctly (and being quite cheeky in speaking for him), Tommy is like a lot of Linux users and wants to stick to Linux fonts whenever possible. And well he should. It's simple as pie to include Linux fonts in your stacks -- hell, at the beginning, where they actually have a chance of being used by Linux users who may have the MS core fonts installed, and who see 90% of the Web in combinations of Arial, Tahoma, Georgia, and Times New Roman. I really like the families of Linux fonts I'm familiar with: Liberation, Deja Vu, Nimbus, Bitstream, and Luxi.

Harri, no disrespect, but your "quiz" answers are all but meaningless. It's like asking me the best dog to choose for hunting and having one of the choices "purple" and the other "Chevrolet." All Web fonts display in HTML, so that choice can be set aside. WYSIWYG is irrelevant, so that one's gone. And all fonts you're likely to see on anyone's Web pages are available on the Internet in one form or another, so that one's out. (And no one with any sense uses images as body text.)

What you're asking is what fonts are "safe" to use on the Web. In the strictest sense, the answer is "none," because there's no guarantee that every off-brand computer in the wilds of the Internet has a particular font installed on it. Even Arial and Times New Roman, with 99+% market penetration, aren't on every single machine in existence. Let me be really cheeky and send you to an article I wrote in 2009 that addresses some of what you're asking.

As for WebDonkey's question about a replacement for Interstate, it's a fairly straightforward Frutiger-like sans-serif font. You can go with the usual suspects: Helvetica, Arial, Tahoma, Liberation Sans, all the other more narrow sans-serif fonts, without any real problems, I'd say, though I can't promise the sizes will correlate perfectly. Test, test, test, and in different browsers on different OS's.

[AutisticCuckoo]

What? You don't have Microsoft TrueType core fonts installed?

No.

Tommy is like a lot of Linux users and wants to stick to Linux fonts whenever possible.

It's not that. I just don't see a reason to jump through hoops and track down and install a bunch of fonts just because web designers can't be bothered to provide a decent font stack. On the other hand, as long as they use a generic font family at the end of the list, I can pretty much decide what fonts I want their sites to use ...

Off Topic:

Harri, no disrespect, but your "quiz" answers are all but meaningless.

'Harri' is a spammer, not here to ask pertinent questions or make a contribution. Just look at the fake signature in his post. He's just copied and pasted some rubbish from the 'Net to gain exposure for his unethical business. It's hardly a coincidence that it includes an 'SEO' company. He probably doesn't even understand that this sort of 'SEO' only exposes him as a totally clueless dilettante.

Don't feed the trolls!

[Black Max]

'Harri' is a spammer, not here to ask pertinent questions or make a contribution. Just look at the fake signature in his post. He's just copied and pasted some rubbish from the 'Net to gain exposure for his unethical business. It's hardly a coincidence that it includes an 'SEO' company. He probably doesn't even understand that this sort of 'SEO' only exposes him as a totally clueless dilettante.

Tommy, I hadn't figured that out when I made that comment. I took a look at his other posts and put 2 and 2 together. Sometimes my troll radar malfunctions....

I see he has departed our shores, so, happy trails, Harri!

[gary.turner]

(re msttcorefonts)No.

OK, I thought they were ready packaged in most distros, at least Debian and Fedora.

(re Black Max post:Tommy is like a lot of Linux users and wants to stick to Linux fonts whenever possible.) It's not that. I just don't see a reason to jump through hoops and track down and install a bunch of fonts just because web designers can't be bothered to provide a decent font stack.

I'd agree except that the msttcorefonts are ubiquitous and readily available as deb and rpm packages (thank the gods RH finally got a decent package manager). And, they provide a reasonable representation of MS fonts on a real, productive OS.

cheers,

gary

[Stevie D]

I am converting a layout to HTML/CSS and the font used is 'Interstate'. What should I replace it with? Should I look for the most similar web font (any suggestions) or use some kind of font replacement function.

First up, there's no harm in having web-unsafe fonts in your site - put them at the top of your stack, and then have a more common font, a most common font and finally a generic like 'sans serif'. Always try to choose fonts that are as similar as possible to your preferred font, in size, shape and feel.

Font replacement techniques are varied. If you are talking about something like sIFR, that should only ever be used for very short items like headings, not for body text, because the rendering and processor requirements add a deadly latency that ruins the experience on any computer lesser than Deep Thought. Some fonts can be 'embedded' or set to download on use, and there are various different techniques for this, but in each case you have to consider the licensing arrangements - most fonts can not be used in this manner.

[Black Max]

there's no harm in having web-unsafe fonts in your site - put them at the top of your stack, and then have a more common font, a most common font and finally a generic like 'sans serif'. Always try to choose fonts that are as similar as possible to your preferred font, in size, shape and feel.

Exactly. Here's the way I do it (sort of), in a particular @font-family declaration:

cool font, Linux font, Mac font, Windows font, ubiquitous font, generic

Say you want a cool, retro sans-serif font stack. You might do:

Frutiger, "Liberation Sans", Helvetica, Arial, sans-serif

The 3% or so with Frutiger get to see your design in all its glory. Liberation Sans gives a close approximation for Linux users; Helvetica covers the Mac crowd, and Arial gets the Windows (and everyone else, since it is quite ubiquitous on its own). The final generic "sans-serif" gets the .01% of users with some strange font compilations so at least your elements display in some sans-serif font.

[AutisticCuckoo]

Sometimes my troll radar malfunctions....

After several years as a moderator here, mine is fairly well-tuned.

OK, I thought they were ready packaged in most distros, at least Debian and Fedora.

I'm running Fedora 12 (latest stable version) and it didn't come with those fonts.

[AlexDawson]

If the font is freely available on the web, you could consider serving it to users with CSS, via @fontface

You didn't mention the legalities! Naughty

Even if a font is free it doesn't mean it's free of copyright or free for commercial use

PS: The below resources are much better than Ampsoft's outdated guide:

http://www.speaking-in-styles.com/we...eb-Safe-Fonts/
http://www.codestyle.org/css/font-fa...ultsFull.shtml
http://www.apaddedcell.com/web-fonts

[ralph.m]

You didn't mention the legalities! Naughty

Yes, thanks Alex. I did start to doubt that comment after posting. A bit too hasty.

[Black Max]

After several years as a moderator here, mine is fairly well-tuned.

Since they've made the decision to give me a gavel, I'm going to have to work on tuning mine up. Any insights or tips you have, please feel free to share them.

Off Topic:

Mrs. Max says hi. Quit making oogly eyes at my better half!

[AutisticCuckoo]

Since they've made the decision to give me a gavel, I'm going to have to work on tuning mine up.

Well, look at that! Congratulations! You look dazzling in green.

Any insights or tips you have, please feel free to share them.

When in doubt, shoot to kill!

Off Topic:

Quit making oogly eyes at my better half!

Can you blame me? And don't think I'm intimidated by your shiny green uniform, either!

[Black Max]

Well, look at that! Congratulations! You look dazzling in green.

New advisors are issued phasers to go with the spiffy green uniforms, so watch your step, ice boy. Mine's set on "deep fat fry." And the green does go well with my bleary red-rimmed soulful brown eyes....