Back To Top

font-family: example;

Here is a list of fonts that are supposed to be basic on every computer. Sometimes it is hard to tell the difference between them and sometimes they are not available on all computers.

Here is what the basic CSS for font-family looks like.

font-family:"Times New Roman",Georgia,Serif; The "Times New Roman" is in quotes because the name has spaces in it. Here we are specifying three different values. The order of preference is from Left to right. If the browser can not do the first it will move on to the next.




Generic Font Classes

Font Name Font style
cursive ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

fantasy ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

monospace ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

serif ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Serif font types

font-family: Book Antiqua, Georgia, serif;

Font Name Font style
Book Antiqua ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Georgia ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Palatino Linotype ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Times ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Times New Roman ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Sans-Serif font types

font-family: Comic Sans MS, Arial, sans-serif;

Font Name Font style
'Trebuchet MS' ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Arial Black ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Comic Sans MS ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Helvetica ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Impact ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Lucida Sans Unicode ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Tahoma ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Verdana ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Monospace font types

font-family: "Courier New", Courier, monospace;

Font Name Font style
Courier ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Courier New ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Lucida Console ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Monaco ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Fantasy font types

font-family: Lucida Calligraphy, Mistral, fantasy;

Font Name Font style
fantasy ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Papyrus ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Copperplate ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Copperplate Gothic Light ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Algerian ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Bodoni ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Brush Script MT ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

initial ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Lucida Calligraphy ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Mistral ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Segoe UI ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Vivaldi ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex


  • the < tt > tag changes the font to Teletype
  • the < b > tag changes the font to BOLD
  • the < small > tag changes the font to small
  • the < em > tag changes the font to italic