What fonts to use when designing xhtml pages via CSS for mobile phones ?

Question

Firstly I plan to CSS to style pages (with fluid layouts) which are targetted towards mobile browsers.

    <style type="text/css"> 
    body {
        background-color: #000;
        color: #fff;
        font: normal 95%/130% "Trebuchet MS", Verdana, Arial, sans-serif;
        margin: 0;
        padding: 20px 0;
    }
    </style>

What values should I put in the font property ? (Forgive me, but I am a CSS newbie, is font referred to as a property of the body element ?) It is obvious that mobile devices will not have a common fontface, so should I just leave it empty?

Answer 1

Mobile devices should have most of the basic font faces that browsers have available. They're still rendered on a screen, so its important to use a non serif font (Verdana, Arial are good choices). Usually, you put in the CSS a multiple of font faces in an "order of preference"

Answer 2

Just make sure to specify a default font family (like sans-serif or monospace) so that the page degrades nicely even if all fonts you specify are unavailable.

Answer 3

Mobile devices cover thousands of devices. Some devices come with only proprietary fonts (like BlackBerry), and some devices come with limited font support. The only safe way to specify fonts is to use the generic font families and let the device choose the best match.

http://www.w3.org/TR/CSS2/fonts.html#generic-font-families