Which CSS Property Is Used to Define the Font of the Element Text?

When styling text on a webpage, one of the most fundamental choices is which font to use. Fonts affect readability, brand identity, and the overall user experience. In CSS, the property used to define the font family of an element’s text is:

font-family

The CSS Property: font-family

The font-family property specifies the typeface that should be used for the text content of an element.

Syntax:

selector {
  font-family: "Font Name", fallback-font, generic-family;
}
  • selector: The HTML element you’re targeting (e.g., body, h1, .paragraph).
  • Font Name: The primary font you want to use (e.g., "Roboto", "Georgia").
  • fallback-font: Alternative fonts if the primary is unavailable.
  • generic-family: General font category (e.g., serif, sans-serif, monospace).

Example:

<p class="text">This is a paragraph with custom font.</p>
.text {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

This will display the text using Helvetica Neue if available, otherwise Arial, and finally a generic sans-serif font.


Font Stacks and Fallbacks

Because not all users have the same fonts installed, it’s good practice to define a font stack—a list of fonts in order of preference.

Example:

body {
  font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
}

If "Open Sans" isn’t available, the browser will try "Segoe UI", then Tahoma, and finally any available sans-serif font.


Adding Custom Fonts

To use a custom font (e.g., from Google Fonts), you can import it:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Then apply it using CSS:

body {
  font-family: "Roboto", sans-serif;
}

Related Font Properties

  • font-size: Controls the size of the text.
  • font-weight: Sets the boldness.
  • font-style: Sets normal, italic, or oblique styles.
  • line-height: Adjusts vertical spacing between lines.
  • font: A shorthand for setting multiple font properties at once.

Summary

To define the font of an element’s text in CSS, use the font-family property:

font-family: "Your Font", fallback, generic-family;

This property gives you full control over typography and ensures your design remains consistent and readable across browsers and devices.

Sharing Is Caring:

Leave a Comment