CSS font-family Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The font-family property controls which typeface(s) the user agent will use to render text by providing a prioritized list of font family names and generic family identifiers. The browser examines that list in order and selects the first face that is available on the system or provided by a web font; if none match, it falls back to a generic family so text remains readable. Because different fonts have different metrics and glyph coverage, the choice of family affects not only the visual style (serif vs sans-serif, display vs text, monospaced vs proportional) but also line breaks, wrapping, and how much text fits on a line.

When a preferred family is not present, substitutes are chosen according to name matching and the fonts the platform exposes; substitution can change metrics such as x-height, letter widths and kerning, which may trigger layout shifts and reflow. Web fonts introduce additional timing considerations: while a remote font is loading the UA may temporarily render text with a fallback and then swap in the web font (or hide text briefly), so authors often design their family stack to minimize jarring changes by pairing fonts with similar proportions and by including a sensible generic family at the end of the list.

font is commonly used in concert with font-weight, font-style and font-size to achieve the intended typographic result; for example, weight and style selectors narrow which face within a family the renderer should attempt to use. Because type choices alter vertical rhythm, authors also consider line-height when switching families so that spacing and readability remain consistent across different faces and screen sizes. Best practice is to include a short, prioritized list of reliable fonts and end with a generic family, choose families that are metrically compatible when possible, and test pages across platforms to observe substitutions and layout impacts.

Definition

Initial value: Depends on user agent
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.fontFamily

Interactive Demo

font-family: verdana, sans-serif;

font-family: "times new roman", times, serif;

font-family: cursive;

font-family: sans-serif;

font-family: serif;

font-family: system-ui;

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.

Syntax

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

Values

<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

Example

HTML

<body>

  <main class="container">

    <h1 class="display">CSS font-family examples</h1>

    <p class="default">This paragraph uses the default font stack set on body.</p>

    <p class="serif">This paragraph uses a serif font stack (Georgia, "Times New Roman", serif).</p>

    <p class="sans">This paragraph uses a sans-serif stack (Helvetica, Arial, sans-serif).</p>

    <p class="mono">This paragraph uses a monospace stack (SFMono-Regular, Menlo, monospace).</p>

    <p class="custom">This paragraph uses a custom font loaded via @font-face ("OpenSansLocal").</p>

  </main>

</body>

CSS

@font-face {
  font-family: "OpenSansLocal";
  src: local("Open Sans"), local("OpenSans"),
       url("https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWp0e.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --base-stack: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  margin: 40px;
  font-family: var(--base-stack);
  color: #222;
  line-height: 1.6;
}

.container {
  max-width: 780px;
}

.display {
  font-family: "OpenSansLocal", var(--base-stack);
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.serif {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1rem;
}

.sans {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.mono {
  font-family: SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
}

.custom {
  font-family: "OpenSansLocal", "Segoe UI", Roboto, sans-serif;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS font-family property. Hover over a browser icon to see the version that first introduced support for this CSS property.