Scribd
Upload
68 views

CSS Fonts

This document discusses choosing fonts for websites. It explains that font selection is important for how readers experience a website and a font can create a brand identity. There are five generic font families: serif, sans-serif, monospace, cursive, and fantasy. Serif fonts have small strokes and create formality while sans-serif fonts have clean lines and a modern look. The document provides examples of font names for each family and explains how to specify fonts using the CSS font-family property with fallback fonts.

Uploaded by

Heba Adel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
68 views

CSS Fonts

This document discusses choosing fonts for websites. It explains that font selection is important for how readers experience a website and a font can create a brand identity. There are five generic font families: serif, sans-serif, monospace, cursive, and fantasy. Serif fonts have small strokes and create formality while sans-serif fonts have clean lines and a modern look. The document provides examples of font names for each family and explains how to specify fonts using the CSS font-family property with fallback fonts.

Uploaded by

Heba Adel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

 Menu   

Dark mode

Dark code
  HTML CSS   

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

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

Some Font Examples


Generic Font Family Examples of Font Names

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

Flights Lahore - Dubai Cheap Flights

$75 LEARN MORE $477 LEARN MO

Cheap Flights Cheap Flights

$170 LEARN MORE $105 LEARN MO

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

NEW

We just launched

W3Schools videos

Explore now

COLOR PICKER




You might also like