Font Family

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

Font Family

Font Selection is Important

Selecting the right font makes a huge difference on how the readers experience a website.

The right font is used to create a strong identity for your brand.

Making a font that is easy to read is important. The font highlights the value to your text. It is highly crucial to choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

  • Serif fonts consists of small stroke at the edges of each letter. They add a sense of formality and elegance.
  • Sans-serif fonts consists of clean lines. They give a modern and minimalistic look.
  • Monospace fonts – consists of letters that have the same fixed width. They give a mechanical look.
  • Cursive fonts resemble human handwriting.
  • Fantasy fonts are decorative/playful fonts.

The CSS font-family Property

In CSS, the font-family property defines the font of a text.

HTML
				
					<h1>CSS font-family</h1>
<p class="p1">Times New Roman font.</p>
<p class="p2">Arial font.</p>
<p class="p3">Lucida Console font.</p>
CSS
				
					.p1 {
  font-family: "Times New Roman", Times, serif;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Output

css fonts