CSS font-family Property


The font-family property specifies a prioritized list of font family names or generic family names. Unlike other CSS properties, values are a comma-separated list indicating alternatives. If the font name contains spaces, for example, Trebuchet MS, it must be enclosed in single or double quotes. The user agent will select the first font on the list that is installed on the computer.

Initial value
Depends on user agent
Applies to
All elements
Computed value
As specified
JavaScript syntax

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.


font-family: [ <family-name> | <generic-family> ] # 


  • <family-name>The name of a font family of choice such as Helvetica or Verdana. You can reference fonts available on the users system, or external fonts imported using @font-face. When the font name contains more than one word, it should be enclosed in quotes, for example "Times New Roman".
  • <generic-family>The following generic family keywords are defined: 'serif', 'sans-serif', 'cursive', 'fantasy', and 'monospace'. These keywords can be used as a general fallback mechanism when an author's desired font choices are not available. As keywords, they must not be quoted. Authors are encouraged to append a generic font family as a last alternative for improved robustness.
  • inherit


<p class="times">The paragraph displayed in the font "Times New Roman". </p> 
<p class="courier">The paragraph displayed in the font "Courier". </p>
.times {
   font-family: "Times New Roman", serif; 
.courier {
   font-family: Courier;

Browser Support

The following table will show you the current browser support for the CSS font-family property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st January 2024