I am searching for a list of fonts I can use in CSS. Since these fonts may be copyrighted, which fonts should I use that are available across Windows (as of XP), Mac OS X and, say, Ubuntu 8.04?
I don't want to rely solely on the newer OSs.
A great bonus would be if the same fonts existed on mobile devices.
See this list of browser safe fonts.
It's Windows+Mac centric, but still applies. They do include a linux distribution screenshot, as well.
Here's some required reading:
Also some related questions on StackOverflow:
The only 100% safe way to declare fonts is to use generics as fall backs.
The generics are:
From the W3C
All five generic font families are defined to exist in all CSS implementations (they need not necessarily map to five distinct actual fonts). User agents should provide reasonable default choices for the generic font families, which express the characteristics of each family as well as possible within the limits allowed by the underlying technology.
Fonts such as Arial and Verdana which many web designers take for granted may not be present on Linux browsers (even firefox on centOS from experience). Apple has most of the Microsoft fonts but there are some which are absent.
Features:
Just remember: Friends don't let friends use Comic Sans.
(Seriously, you've got good answers above already...).
Verdana is a good one.
Here's a guide...
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
As for mobile, all I can say is good luck! My daughter got my Blackberry from me for five minutes and changed my background, ringtone, and now all my fonts are cartoon fonts.
Here's a list of iPhone fonts, but it maybe slightly out-of-date. http://daringfireball.net/misc/2007/07/iphone-osx-fonts
CSS allows you to use any fonts installed on the system. font-family allows you to list many fonts. If the parser doesn't find the first one installed on the system, it moves onto the next one. That's why most font-family definitions cascade down to sans-serif or serif. If the browser doesn't have any of your fonts, it uses the default serif, sans-serif, or monospaced font, etc.
If you're a sucker for typography, unfortunately until CSS3 fonts take off you're going to have to live with serving up all the good fonts to your Mac users, since Mac OS X has a far greater selection of great fonts installed than Windows. I get a little depressed when I load up my sites on Windows and I'm greeted with a pile of rigid, aliased fonts.
You could use sIFR for headers and not worry about web-safe fonts at all. Take a look at the example page. It's pretty awesome.
Arial is my "safe" font that I use all the time.
But I've been using Trebuchet a lot lately. It's common enough that practically everybody is going to have it. It's used all over the place at StackOverflow, FeedBurner, and a lot of other popular sites these days.
But, just in case the user doesn't have it, I'd use CSS like this (just like StackOverflow has it)...
font-family:Trebuchet MS,Helvetica,sans-serif;
I'd recommend using web fonts if you desire layout consistency and complete control over the fonts rendered for your site. Here are some web font services to check out:
All of these services provide thousands of high-quality fonts. Google fonts are totally free. WebINK and TypeKit both require a subscription model. I've never used fonts.com but they probably have a similar model.
Here's a nice article about typefaces for the web.
A lot of fonts are available from modern browsers. However, keep it simple and a little large. Also, use contrasting colors for easier reading.
While having such a list is certainly useful, you should also take advantage of the fallback mechanism of CSS. For example, you can list Consolas, Courier New, monospace in your font-family attribute and get the best possible match on that device.
The last item on each font-family list should be a neutral one such as "sans serif", "serif", "monospace", etc.
This way, your designers can use fonts they think best, as long as there's a reasonable downlevel experience.
See, for example w3.org's guidance
You're pretty save with Helvetica/Arial (yes, I know there's a difference!) or Verdana for sans-serif or Georgia or Times for serif. In your css you can just put a list in your preferred order. You should always end in a generic font-family to cover all your bases.
My sites usually look something like this:
font-family: Helvetica, Arial, sans-serif;
font-family: Georgia, serif;
If you want to get cute and fancy with your typography, you should look into SIFR, which uses flash to embed special fonts.