CSS Fonts

CSS fonts are used to control the appearance of text on web pages. You can specify different fonts, sizes, weights, styles, and other properties to achieve the desired look for your text. Here’s a breakdown of how you can use CSS to style fonts, with examples:

Basic Font Properties

Font Family

The font-family property specifies the font for text. You can list multiple fonts as a fallback system, so if the first font isn’t available, the next one will be used.
```
p {
  font-family: 'Arial', sans-serif;
}
```
In this example, the text inside <p> elements will use the Arial font. If Arial isn’t available, it will fall back to any available sans-serif font.
Font Size

The font-size property defines the size of the font. You can use units like px, em, rem, %, and more.
```
h1 {
  font-size: 24px;
}
```
This sets the font size of <h1> elements to 24 pixels.
Font Weight

The font-weight property sets the thickness of the text. Common values include normal, bold, and numeric values from 100 to 900.
```
strong {
  font-weight: bold;
}
```
This makes the text inside <strong> elements bold.
Font Style

The font-style property specifies the style of the font. It typically includes values like normal, italic, and oblique.
```
em {
  font-style: italic;
}
```
This makes the text inside <em> elements italicized.
Line Height

The line-height property controls the spacing between lines of text.
```
p {
  line-height: 1.5;
}
```
This sets the line height to 1.5 times the font size for <p> elements.

Advanced Font Properties

Font Variant

The font-variant property is used to control the use of alternative glyphs, such as small caps.
```
h2 {
  font-variant: small-caps;
}
```
This makes the text inside <h2> elements appear in small caps.
Font Stretch

The font-stretch property allows you to make the text wider or narrower.
```
.narrow {
  font-stretch: condensed;
}
```
This makes the text inside elements with the class .narrow appear condensed.

Web Fonts

You can also use web fonts from services like Google Fonts or Adobe Fonts. To use a web font, you typically include a link to the font in your HTML and then apply it using CSS.

Including Google Fonts

In your HTML:

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

In your CSS:

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

This will apply the Roboto font to the entire <body> of your document.

Example

Here’s a complete example combining several font properties:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Example</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      line-height: 1.6;
    }
    h1 {
      font-size: 2em;
      font-weight: 700;
      font-style: italic;
    }
    p {
      font-weight: normal;
      font-style: normal;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text styled with CSS fonts.</p>
</body>
</html>

In this example, the entire body text uses the Roboto font, <h1> elements are styled to be larger, bold, and italic, while <p> elements use normal weight and style.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us