Fonts (Font Family)

Choosing the right font for your website is important!

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

 Font-Family Property

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

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.

If the font name is more than one word, it must be in quotation marks, like: “Times New Roman”.


See the Pen CSS-FontFamily by Ankit (@AnkitPathshalaCoding) on CodePen.

Alignment CSS properties

The text-align property lets you position your text to the left, right or centre of your page. Remember to use the American spelling “center” and include the hyphen (-).

Exercise 5.1

This webpage displays a few songs.
Each of the lyrics paragraphs have id’s, but the CSS rules for them have no properties yet.
Add a font-family property to each of the CSS rules, using a generic family name that works for all computers. Choose a different font family for each rule