Dark code

  HTML   
 Menu  Log in

CSS Fonts
‹ Previous Next ›

Choosing the right font for your website is

important!

Font Selection is Important

Choosing the right font has a huge impact on how
the readers experience a website.

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.

Generic Font Families

In CSS there are five generic font families:

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.

Difference Between Serif and

Sans-serif Fonts

FF F
Sans-serif Serif Serif
(redserifs)

Note: On computer screens, sans-serif fonts are

considered easier to read than serif fonts.

Some Font Examples

Generic Font Examples of Font Names

Family

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

ADVERTISEMENT

The CSS font-family Property

In CSS, we use the font-family property to
specify the font of a text.

Note: If the font name is more than one word, it

must be in quotation marks, like: "Times New
Roman".

Tip: 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. Read
more about fallback fonts in the next chapter.

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 »

‹ Previous Next ›

ADVERTISEMENT

COLOR PICKER



Get certified
by completing
a CSS
course today!

school
w3 s
2
CE

02

TI 2
R

FI .
ED

Get started

ADVERTISEMENT

Report Error

Spaces

Upgrade

Newsletter

Get Certified

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples

Get Certified
HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate

FORUM | ABOUT

W3Schools is optimized for learning and training.

Examples might be simplified to improve reading and
learning. Tutorials, references, and examples are
constantly reviewed to avoid errors, but we cannot
warrant full correctness of all content. While using
W3Schools, you agree to have read and accepted our
terms of use, cookie and privacy policy.

Copyright 1999-2022 by Refsnes Data. All Rights

Reserved.
W3Schools is Powered by W3.CSS.