CSS font-family Property

CSS font-family property specifies a list of comma-separated fonts for an element.

These fonts are prioritized from left to right. This means that the browser by default will use the first font. If the first font is not available or not supported by the browser, it will use the second one and so on until the end of the list.

There are a few points which we should keep in mind while applying the font-family property:

  • Multiple font names must be comma-separated.
  • The font list must always end with a generic font family. These generic font families are serif, sans-serif, monospace, cursive, and fantasy.
  • If the font name contains any white space, it must be enclosed inside quotes.

Refer to the example below:


  font-family: Arial, Helvetica, sans-serif
  font-family: "Times New Roman", Times, serif;

CSS Syntax

The font-family property has the following syntax:

font-family: family-name|generic-family|initial|inherit;

Property Values

The font-family property accepts the following values:

family-nameSpecifies the name of the font family. For example, “Times” and “Helvetica” are font families.
generic-familySpecifies a generic family name. There are five generic family: ‘serif’, ‘sans-serif’, ‘monospace’, ‘cursive’ and ‘fantasy’.
initialSets the font-family property to its default value. The default value depends on the browser.
inheritInherits the font-family property from the parent element.

General Info

Default ValueBrowser dependent
JavaScript Usageelement.style.fontFamily = “Arial, Helvetica, sans-serif”;


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts

Leave a Comment