Learn to use CSS font family Property With Example

Font family Property in CSS

To specify the font to be used for the text in your website, CSS provides the font-family property.

An example of font-family property

You may specify primary font family name as the first value and should give the fallback/backup font names as well in the font-family property.

In a case, the browser does not support the primary or first name of the font, it can choose the second one and so on.

Syntax to use CSS font family

This is how the font-family CSS property is defined:

font-family: Verdana, Arial, Times, “Times New Roman”, Serif;

So the font-family keyword is followed by the family name of your choice. The first name should be the one that you intend to use for the particular element (headings, paragraphs, lists etc.) or may be across the site.

The second font family name, which is separated by a comma, is the first backup in case the first font is not available and so on.

If a font name has multiple words, it should be enclosed in the double quotes e.g. “Times New Roman”. If you are using the font family in HTML attribute then it should be enclosed in single quotes.

The last font name in the list should be one of the five generic family names that are always available in HTML and CSS. The five generic font names are:

  1. Serif
  2. Sans-serif
  3. Cursive
  4. Fantasy
  5. Monospace

Example of using font-family

The following example shows how to use the font-family property. The example uses different font family names for headings and paragraph.

CSS font-weight

Experience this example online

As you can see in the demo, the h1 is given Verdana, h2 is “Time New Roman” and <p> tag is given the Arial as primary fonts, which is specified in CSS font-family property.

Also see: CSS font

Was this article helpful?

Related Articles

Leave A Comment?