CSS font-family Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 39 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The font-family property in CSS is used to specify the typeface of text. It allows web developers to define a prioritized list of font family names and/or generic family names for the selected element.

This property plays a crucial role in controlling the typography of a web page, ensuring that the text is rendered in a visually appealing and readable manner.

💡 Syntax

The syntax for the font-family property involves listing one or more font family names, separated by commas. Generic family names should always be included as a fallback.

Syntax

Copied

element {
  font-family: "font-name", generic-family;
}

Here, "font-name" can be a specific font family, and generic-family is one of the five generic font families: serif, sans-serif, monospace, cursive, or fantasy.

🎛️ Default Value

The default value of the font-family property depends on the user agent (browser). Typically, it is set to the browser's default sans-serif font.

🏠 Property Values

Specific font family names: Such as "Arial", "Times New Roman", "Courier New", etc.
Generic family names:
- serif: Fonts with small lines or strokes regularly attached to the end of a larger stroke in a letter or symbol within a particular font.
- sans-serif: Fonts without the small lines or strokes at the ends of the letters.
- monospace: Fonts in which all characters occupy the same amount of horizontal space.
- cursive: Fonts that emulate handwriting.
- fantasy: Decorative fonts that do not fit into the other categories.

📄 Example

In this example, we'll set the font family of a paragraph to Arial, with a fallback to the generic sans-serif font.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS font-family Example</title>
  <style>
    p {
      font-family: "Arial", sans-serif;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Font Family</h1>
  <p>
    This is a paragraph with the font family set to Arial. If Arial is not available, it will fall back to a sans-serif font.
  </p>
</body>
</html>

🖥️ Browser Compatibility

The font-family property is universally supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is one of the most fundamental CSS properties and is essential for web typography.

🎉 Conclusion

The font-family property is a key tool for web developers to control the typography of their web pages.

By specifying a list of preferred fonts along with generic fallbacks, you can ensure that your text is rendered in a way that matches your design vision. Experiment with different font families to see how they impact the look and feel of your web projects.