Font Styles, Shorthand and Web Fonts

What Is It?

Font properties choose a face and its variants. The font shorthand combines several settings; @font-face registers a downloadable font resource.

Properties, Tags and Attributes Explained

• font-style: Selects a normal, italic, or oblique face.
• font-variant-caps: Requests variants such as small-caps.
• font: Shorthand with required font-size and font-family; optional line-height follows a slash.
• font-variant-numeric: Controls number forms such as tabular-nums when the font supports them.
• @font-face: Defines a font-family with src resources; font-display controls behavior while loading.
• font-display: An @font-face descriptor controlling font loading display behavior; swap permits fallback text while the chosen face loads.
• src: An @font-face descriptor listing local font names or font resource URLs. It is not a normal element styling property.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Combine font settings

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Styles, Shorthand and Web Fonts</title>
  <style>
    .demo { font: italic 600 1.25rem/1.6 Georgia, serif; }
  </style>
</head>
<body>
  <p class="demo">A readable editorial introduction.</p>
</body>
</html>

What you see: The paragraph uses an italic serif face with a 1.6 line height.

Example 2: Numeric alignment

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Styles, Shorthand and Web Fonts</title>
  <style>
    .demo { font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; }
    .label { font-variant-caps: small-caps; }
  </style>
</head>
<body>
  <div class="demo"><p class="label">Lesson scores</p><p>111.00</p><p>888.00</p></div>
</body>
</html>

What you see: Fonts supporting tabular numerals give each digit equal advance width.

Example 3: Web font with a local fallback

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Styles, Shorthand and Web Fonts</title>
  <style>
    @font-face { font-family: DemoLocal; src: local("Arial"); font-display: swap; }
    p { font-family: DemoLocal, system-ui, sans-serif; }
  </style>
</head>
<body>
  <p>This example uses a local face when available, then the system fallback.</p>
</body>
</html>

What you see: The page stays readable even if the named local font is unavailable.

Example 4: Select a font style directly

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Styles, Shorthand and Web Fonts</title>
  <style>
    p { font-family: Georgia, serif; }
    .italic { font-style: italic; }
    .normal { font-style: normal; }
  </style>
</head>
<body>
  <p class="normal">Normal editorial text</p><p class="italic">Italic editorial text</p>
</body>
</html>

What you see: The same family is requested in normal and italic styles. Use font-style for emphasis when the HTML meaning is already expressed correctly, such as with em.

When and Where to Use It

Use font shorthand for a component baseline, tabular numbers for changing numeric columns, and @font-face for a self-hosted brand font.

Common Mistake or Useful Tip

For a real web font, replace local("Arial") with url("/fonts/site.woff2") format("woff2") and provide that file. A missing font must have a fallback.

Try It Yourself

Compare italic with normal and increase the shorthand line-height.