Home

How to Make a List of Fonts for Your HTML5 and CSS3 Based Web Pages

|
Updated:  
2016-03-26 13:17:24
|
HTML5 and CSS3 All-in-One For Dummies
Explore Book
Buy On Amazon

The uncertainty of knowing whether your fonts will be displayed correctly on your HTML5 and CSS3 web page is frustrating, but you can take some control. You can specify an entire list of font names if you want. The browser tries each font in turn. If it can't find the specified font, it goes to the next font and on down the line.

You might choose a font that you know is installed on all Windows machines, a font found on Macs, and finally one found on all Linux machines. The last font on your list should be one of the generic fonts, so you'll have some control over the worst-case scenario.

These fonts are commonly installed on Windows, Mac, and Linux machines.

Windows Mac Linux
Arial Arial Nimbus Sans L
Arial Black Arial Black
Comic Sans MS Comic Sans MS TSCu_Comic
Courier New Courier New Nimbus Mono L
Georgia Georgia Nimbus Roman No9 L
Lucida Console Monaco
Palatino Palatino FreeSerif
Tahoma Geneva Kalimati
Times New Roman Times FreeSerif
Trebuchet MS Helvetica FreeSans
Verdana Verdana Kalimati

You can use this chart to derive a list of fonts to try. For example, look at the following style:

p { font-family: "Trebuchet MS", Helvetica, FreeSans, sans-serif;}

This style has a whole smorgasbord of options. First, the browser tries to load Trebuchet MS. If it's a Windows machine, this font is available, so that one displays. If that doesn't work, the browser tries Helvetica. If that doesn't work, it tries FreeSans, a font frequently installed on Linux machines. If this doesn't work, it defaults to the old faithful sans serif, which simply picks a sans serif font.

Note that font names of more than one word must be encased in quotes, and commas separate the list of font names.

Don't get too stressed about Linux fonts. It's true that the equivalencies are harder to find, but Linux users tend to fall into two camps: They either don't care if the fonts are exact, or they do care and they've installed equivalent fonts that recognize the common names. In either case, you can focus on Mac and Windows people for the most part.

About This Article

This article is from the book: 

About the book author:

Andy Harris earned a degree in Special Education from Indiana University/Purdue University–Indianapolis (IUPUI). He taught young adults with severe disabilities for several years. He also taught himself enough computer programming to support his teaching habit with freelance programming.
Those were the exciting days when computers started to have hard drives, and some computers connected to each other with arcane protocols. He taught programming in those days because it was fun.
Eventually, Andy decided to teach computer science full time, and he still teaches at IUPUI. He lectures in the applied computing program and runs the streaming media lab. He also teaches classes in whatever programming language is in demand at the time. He has developed a large number of online video-based courses and international distance education projects.
Andy has written several books on various computing topics and languages including Java, C#, mobile computing, JavaScript, and PHP/MySQL.
Andy welcomes comments and suggestions about his books. He can be reached at [email protected].