Garry Conn

How to Choose Website Fonts that Work on Windows, Mac and Linux Computers

By Garry Conn - Sat, Dec 08 2012, 7:21am CST

Choosing fonts for your website that work on all types of computers can be a challenge. If you choose a font that looks great on your computer that same font might not be installed or used on another. This could result in your website not looking as cool as you thought. In other words, the fonts you have selected might work on your computer, but they might not be working on your visitors computer. The best way to prevent this from happening is to choose fonts that work on all types of computers. How do you do that though? Here's how.

Thanks to a wonderful website called Code Style, they have made the process of choosing fonts that work on all types of computers very easy. They have a tool on their website called the font stack builder

With the font stack builder, you can choose specific fonts that are known to work with Windows, Mac and Linux computers. The drop down menus display the font-family names and the percentage of computers that use or have these fonts installed on their system. Here is what the font stack looks like in the css file for my website:

font-family: Arial, Verdana, "DejaVu Sans", sans-serif;

The font stack builder shows me that 99.90% of all Windows computers use Arial, 99.26% of all Mac computers use Verdana and 97.83% of all Linux computers use DejaVu Sans. Displaying Arial to all users is my goal. I have a 99.90% chance of achieving that. However, for .10% chance that someone doesn't have Arial installed Verdana will then be chosen. And if Verdana isn't installed then DejaVu Sans will be shown. See how this works! The font stack builder puts you in complete control with which fonts you want to use that will work with all types of computers.

You might be asking, "are these the only three font combinations I can use?". The answer is no. You can choose many different combinations. Here is an example of the font stack I use for heading tags:

h1, h2, h3, h4 {
    font-family: Tahoma, "Lucida Grande", "Trebuchet MS", "Nimbus Sans L", Verdana, sans-serif;

Tahoma is 100% for Windows and Lucida Grande is 100% for Mac. Then with Linux systems I chose Trebuchet MS and Nimbus Sans L. The percentages were a little lowers with these two so I also chose Verdana as a fall back font-family. Play around with the tool and see if you can create a font stack that looks great for your website and works for all computer systems. Also position the fonts based on Windows first, Mac second and Linux third. More people use Windows systems than Mac or Linux, and more people use Mac systems compared to Linux. If you have any questions or need help, feel free to contact me.

comments powered by Disqus