CSS Reference

Quick Reference

The following are lists of good, web-safe font families for HTML/CSS (there are others less reliable). The browser will try each member of the family in order until reaching the generic, which will always work.

In the example below, we’d prefer the site page use Times New Roman, but if that’s not available to the browser, then the browser should use Times, and finally the default serif font if the others cannot be found.

p {
    font-family: "Times New Roman", Times, serif;
}

Note

The members of the font-family are separated by commas. If the font has a name with spaces in it, it must be wrapped in quotation marks.

Serif Fonts

font-familyExample Text
Garamond, serif

This is a heading

This is a paragraph.

Georgia, serif

This is a heading

This is a paragraph

"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading

This is a paragraph

"Times New Roman", Times, serif

This is a heading

This is a paragraph

Sans-Serif Fonts

font-familyExample Text
Arial, Helvetica, sans-serif

This is a heading

This is a paragraph

"Arial Black", Gadget, sans-serif

This is a heading

This is a paragraph

"Comic Sans MS", cursive, sans-serif

This is a heading

This is a paragraph

Impact, Charcoal, sans-serif

This is a heading

This is a paragraph

Tahoma, Geneva, sans-serif

This is a heading

This is a paragraph

"Trebuchet MS", Helvetica, sans-serif

This is a heading

This is a paragraph

Verdana, Geneva, sans-serif

This is a heading

This is a paragraph

Monospace Fonts

font-familyExample Text
"Courier New", Courier, monospace

This is a heading

This is a paragraph

"Lucida Console", Monaco, monospace

This is a heading

This is a paragraph

Cursive Fonts

font-familyExample Text
"Brush Script MT", cursive

This is a heading

This is a paragraph


CSS Notes:


We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.