Font Styling in CSS: Using Web Fonts, Font Families, and Weights

Live editor for all the examples will be added soon.

CSS allows you to style text on a webpage with various font properties, such as font families, font weights, and web fonts. Choosing the right fonts and understanding how to implement them effectively can significantly improve the readability and design of your website. In this guide, we’ll explore how to use web fonts, define font families, and adjust font weights.

1. Using Web Fonts

What are Web Fonts?

Web fonts allow you to use custom fonts that aren’t installed on the user’s device. With web fonts, you can use a wide range of font styles beyond the standard system fonts. Services like Google Fonts make it easy to add custom fonts to your website.

How to Use Web Fonts?

You can add web fonts by linking to an external font provider or importing them in your CSS file. The most common method is to use Google Fonts.

Example: Using Google Fonts

To use a Google Font on your website, follow these steps:

  1. Import the Font in HTML
    Add the following link tag inside the <head> section of your HTML file:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

This imports the Roboto font with two font weights: 400 (normal) and 700 (bold).

  1. Apply the Font in CSS
    Use the font in your CSS by specifying it in the font-family property.
   body {
     font-family: 'Roboto', sans-serif;
   }

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Using Web Fonts</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
    h1 {
      font-weight: 700;
    }
    p {
      font-weight: 400;
    }
  </style>
</head>
<body>
  <h1>This is a heading using Roboto Bold</h1>
  <p>This is a paragraph using Roboto Regular.</p>
</body>
</html>

Pros of Web Fonts:

  • Offers a wide variety of fonts, beyond the system defaults.
  • Enhances the design and branding of your site.

Cons of Web Fonts:

  • Adds extra HTTP requests, which may slow down page load time (though this is often minimal).

2. Font Families

What are Font Families?

A font family is a group of fonts that share a similar design but vary in weight, width, and style. In CSS, the font-family property allows you to specify the primary font you want to use, along with fallback options.

Syntax:

font-family: "Primary Font", "Fallback Font", generic-family;
  • Primary Font: The preferred font (web font or system font).
  • Fallback Font: A backup font in case the primary font is unavailable.
  • Generic Family: A generic font category such as serif, sans-serif, or monospace as a last fallback.

Example:

body {
  font-family: 'Arial', 'Helvetica', sans-serif;
}

In this example, the browser will first try to use Arial. If it’s not available, it will fall back to Helvetica, and if neither is available, it will use any default sans-serif font.

Common Generic Font Families:

  • Serif: Fonts with small lines or strokes regularly attached to the ends of larger strokes (e.g., Times New Roman).
  • Sans-Serif: Fonts without the strokes (e.g., Arial, Helvetica).
  • Monospace: Fonts where each character occupies the same width (e.g., Courier, Consolas).

Example:

h1 {
  font-family: 'Georgia', serif;
}

p {
  font-family: 'Courier New', monospace;
}

In this example, the <h1> element will use the Georgia font with a fallback to any serif font, and the <p> element will use Courier New with a fallback to any monospace font.

Pros of Using Font Families:

  • Provides fallback options in case the primary font isn’t available.
  • Ensures the website remains visually consistent, even if the web font fails to load.

Cons of Using Font Families:

  • Too many fallback options may lead to inconsistent designs across different browsers.

3. Font Weights

What is Font Weight?

The font-weight property defines the thickness (or boldness) of the text. CSS provides different numeric values for font weights, ranging from 100 (thin) to 900 (bold). Some fonts support only a few of these values, while others support the full range.

Syntax:

font-weight: value;
  • Normal (400): Regular text.
  • Bold (700): Bold text.
  • Bolder: Increases the boldness compared to the parent element.
  • Lighter: Decreases the boldness compared to the parent element.

Numeric Values:

  • 100: Thin
  • 200: Extra Light
  • 300: Light
  • 400: Normal
  • 500: Medium
  • 600: Semi-Bold
  • 700: Bold
  • 800: Extra Bold
  • 900: Black

Example:

h1 {
  font-weight: 700; /* Bold */
}

p {
  font-weight: 400; /* Normal */
}

In this example, the heading will be bold, while the paragraph text will remain normal.

Example Using Different Font Weights:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Weights Example</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
    h1 {
      font-weight: 700;
    }
    h2 {
      font-weight: 500;
    }
    p.light {
      font-weight: 300;
    }
    p.thin {
      font-weight: 100;
    }
  </style>
</head>
<body>
  <h1>This is Roboto Bold (700)</h1>
  <h2>This is Roboto Medium (500)</h2>
  <p class="light">This is Roboto Light (300)</p>
  <p class="thin">This is Roboto Thin (100)</p>
</body>
</html>

In this example:

  • Bold (700) is applied to the <h1> heading.
  • Medium (500) is applied to the <h2> heading.
  • Light (300) and Thin (100) are applied to the two paragraphs.

Pros of Using Font Weights:

  • Allows for greater typographical control and emphasis.
  • Provides a wide range of styles to enhance text readability and design.

Cons of Font Weights:

  • Some fonts do not support all weight values.
  • Using too many different weights can make the design inconsistent.

4. Combining Font Families and Font Weights

You can combine both font families and weights to create flexible and readable designs. By choosing complementary font families and varying font weights, you can create a professional, organized look for your text.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Families and Weights</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Roboto:wght@400;700&display=swap">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
    }

    h1 {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
    }

    h2 {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
    }

    p {
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
    }

    strong {
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1>Heading 1 with Roboto Bold</h1>
  <h2>Heading 2 with Roboto Regular</h2>
  <p>This paragraph uses Open Sans Regular. <strong>Important text</strong> is slightly bolder.</p>
</body>
</html>

Explanation:

  • The body text uses Open Sans with a weight of 400 (normal).
  • The h1 heading uses Roboto Bold (700), and the h2 uses Roboto Regular (400).
  • The strong tag makes the text bolder using Open Sans at 600.

Conclusion

Font styling in CSS allows for great control over the appearance and readability of your website. By understanding how to use web fonts, define font families, and adjust font weights, you can create flexible, visually appealing, and user-friendly designs. Whether you’re building a simple website or a complex application, proper font styling will ensure your text is both attractive and easy to read.