CSS Fonts
CSS Fonts
CSS Fonts
❮ Previous Next ❯
The right font can create a strong identity for your brand.
Using a font that is easy to read is important. The font adds value to your text. It is also important to choose
the correct color and text size for the font.
1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and
elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic
look.
3. Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.
All the different font names belong to one of the generic font families.
Serif
Times New Roman
Georgia
Garamond
Sans-serif
Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive
Brush Script MT
Lucida Handwriting
Fantasy
Copperplate
Papyrus
The font-family property should hold several font names as a "fallback" system, to ensure maximum
compatibility between browsers/operating systems. Start with the font you want, and end with a generic family
(to let the browser pick a similar font in the generic family, if no other fonts are available). The font names
should be separated with comma.
Note: If the font name is more than one word, it must be in quotation marks, like: "Times New Roman".
Example
Specify some different fonts for three paragraphs:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
Try it Yourself »