CSS Fonts

 

CSS Fonts

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

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".

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;

CSS Web Safe Fonts

What are Web Safe Fonts?

Web safe fonts are fonts that are universally installed across all browsers and devices.

Fallback Fonts

However, there are no 100% completely web safe fonts. There is always a chance that a font is not found or is not installed properly.

Therefore, it is very important to always use fallback fonts.

This means that you should add a list of similar "backup fonts" in the font-family property. If the first font does not work, the browser will try the next one, and the next one, and so on. Always end the list with a generic font family name.

Example

Here, there are three font types: Tahoma, Verdana, and sans-serif. The second and third fonts are backups, in case the first one is not found.

p {
font-family: Tahoma, Verdana, sans-serif;
}

Best Web Safe Fonts for HTML and CSS

The following list are the best web safe fonts for HTML and CSS:

• Arial (sans-serif)
• Verdana (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

CSS Font Fallbacks

Commonly Used Font Fallbacks

Below are some commonly used font fallbacks, organized by the 5 generic font families:

• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy

Serif Fonts

font-family	Example text
"Times New Roman", Times, serif	This is a Heading This is a paragraph.
Georgia, serif	This is a Heading This is a paragraph.
Garamond, serif	This is a Heading This is a paragraph.

Sans-Serif Fonts

font-family	Example text
Arial, Helvetica, sans-serif	This is a Heading This is a paragraph.
Tahoma, Verdana, sans-serif	This is a Heading This is a paragraph.
"Trebuchet MS", Helvetica, sans-serif	This is a Heading This is a paragraph.
Geneva, Verdana, sans-serif	This is a Heading This is a paragraph.

---

Monospace Fonts

font-family	Example text
"Courier New", Courier, monospace	This is a Heading This is a paragraph.

Cursive Fonts

font-family	Example text
"Brush Script MT", cursive	This is a Heading This is a paragraph.

Fantasy Fonts

font-family	Example text
Copperplate, Papyrus, fantasy	This is a Heading This is a paragraph.

Bottom of Form

All CSS Font Properties

Property	Description
font	Sets all the font properties in one declaration
font-family	Specifies the font family for text
font-size	Specifies the font size of text
font-style	Specifies the font style for text
font-variant	Specifies whether or not a text should be displayed in a small-caps font
font-weight	Specifies the weight of a font