We had a problem where a website looked great on Windows and Mac – all browsers, but on Linux there were several issues. On analysis, these were caused by the differing font styles used by Linux. So we came up with the ultimate work around.

Before the fix we had the following CSS:

Body { font-family: Arial, Helvetica, Sans-Serif; }

Arial is not installed in Linux so the closest font (tested on Ubuntu and Kubuntu) is Freesans.

We then changed the CSS to:

Body { Font-family: Arial, Freesans, Sans-Serif; }

As a browser will pick-up the next font to see if it is installed or not. In this instance that will be Freesans, which is installed. If any operating systems don’t have Freesans installed, the next font of the font-family will be Sans-Serif, which doesn’t look too bad.

What about Windows and Mac OS? In case Arial is not installed (what is very unlikely to happen) it will simply skip Freesans (Windows and Mac OS don’t have Freesans installed) and use Sans-Serif as a font to render the page.

That’s how crossbrowser and crossOS compatibility works.

Tested on Kubuntu (version 8.04) on Konqueror and Firefox 3, Ubuntu (version 7.04) on Firefox 2, Safari 1.3 and Firefox 2 in Mac OS X (10.3), IE 6, IE7 and all other windows browsers as usual.

Looks good.