tags:

views:

456

answers:

5

How to make cross browser, cross platform and all devices compatible css font stack?

+3  A: 

The best solution is to always supply a generic font family after any specific fonts:

font-family: "Foo Regular", "Bar Sans", sans-serif;

Anonymous
+1  A: 

Maybe this link can give you some more ideas:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Using the above font families never gave me problems.

easwee
Unfortunately not much good for mobile web as they often use *completely* different fonts
James
+6  A: 

You cannot gaurantee the fonts that will be used on a mobile device in the same way you can gaurantee which fonts are available on a normal computer.

A safe bet is to use a generic font family that can be interpreted by the mobile browser to show you the relevant font, e.g.

font-family: serif; /* (e.g., Times) */
font-family: sans-serif; /* (e.g., Helvetica) */
font-family: monospace; /* (e.g., Courier) */
James
what is for verdana and arial?
metal-gear-solid
Verdana and Arial are sans-serif
James
@James Goodwin - Then why not `font-family: Verdana, Arial, sans-serif` if `verdana` and `arial` are not available in device then it can take `serif`.
metal-gear-solid
+1  A: 

Perhaps this can help you on your quest: Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite

nikc
A: 

on a mobile web site best thing to do is not to set font-family at all

nLL