1 Big Reason To Use Standard Fonts

Recently, we were working on a project for a client who specified a non-standard font to be used in his web page. Realizing that this preferred font was not standard on PC’s, we declared a list of fonts for the font-family property as shown below.

body { font-family: Helios,Arial,"Trebuchet MS",Verdana; }

The font-family property is a prioritized list of fonts that should be used based on what is recognized by the browser. In other words, the browser will use the first font that it is capable of displaying.

So, the CSS code above should have worked. But it didn’t, or rather, not completely.

What went wrong?

Well, most browsers were able to accurately render the website. But when viewed with Firefox 2 and Safari 2 on a Mac, there were major problems. On Firefox, there were several lines of missing text. On Safari, all of the text had disappeared!

Both Safari 2 and Firefox 2 are notorious for being extremely buggy, especially on Macs. And yes, there are more recent releases which have addressed these problems. However, with web development, it is important to make sure that websites look good for all potential users. So we fixed the problem to ensure maximum compatibility.

How did we fix it?

To fix this problem, we simply removed Helios, which was the non-standard font. Arial, the second font in the list, is very similar to Helios, so the rendering of the page wasn’t greatly affected.

But sometimes, it is important to include unique fonts in a web page. To achieve this, while ensuring maximum cross-browser compatibility, we suggest opting for an image or using flash.

Cross-browser compatibility is a big thing in the web development world. While we might always have the latest browsers installed on our systems, we can’t expect that to be true for visitors. As a result, to ensure maximum accessibility it is important to check a website across various browsers and platforms.

To learn more about cross-browser compatibility, check out our article Is Your Website Cross-Browser Compatible?