What are cross-browser, cross platfom web safe fonts?

Question

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

Answer 1

It points out in 15.3 of the W3C Recommendation regarding the 'font-family' property that you should have fallback fonts in a font stack so that your website visitor has some viable choices.

The 'web safe' font stacks I use, which cover most if not all devices are as follows:

/* Web Safe Font Stacks (classes set in CSS) */
.head {font-family: Georgia,'Times New Roman',serif}
.para {font-family: Verdana,Arial,sans-serif}
.mono {font-family:'Courier New',Courier,monospace}
.fant {font-family: Papyrus,Impact,fantasy}
.curs {font-family:'Apple Chancery','Lucida Calligraphy',cursive}

This covers headers, paragraphs, monospace for code samples, fantasy for special items, and cursive for emphasis. You may just need one for headers (H1~H6) and another for body text:

body {font-family: Verdana,Arial,sans-serif}
h1, h2, h3, h4, h5, h6 {font-family: Georgia,'Times New Roman',serif}

Check the following cheatsheet from 2010 that includes Linux and iOS. It gives the average percentages for usage between Windows, Mac, Linux, and iOS: Web Safe Fonts