CSS Fonts

CSS fonts allow you to control the typography of text in HTML elements. You can set the font family, size, weight, style, and apply custom web fonts for a consistent design.

Font Family

The font-family property specifies the font for text. You can provide multiple fonts as a fallback.

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

h1 {
  font-family: "Times New Roman", serif;
}

Font Size

The font-size property sets the size of the text. You can use pixels, em, rem, percentages, or keywords.

p {
  font-size: 16px;
}

h1 {
  font-size: 32px;
}

Font Weight

The font-weight property defines the thickness of the text. Common values: normal, bold, lighter, or numeric values 100-900.

strong {
  font-weight: bold;
}

p.light {
  font-weight: 300;
}

Font Style

The font-style property sets the style of the text, such as normal, italic, or oblique.

em {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Custom Web Fonts

You can use @font-face to include custom fonts in your website.

@font-face {
  font-family: "MyCustomFont";
  src: url("MyCustomFont.woff2") format("woff2"),
       url("MyCustomFont.woff") format("woff");
}

p.custom {
  font-family: "MyCustomFont", sans-serif;
}

Best Practices for Fonts

• Use readable fonts and maintain consistent font hierarchy
• Limit the number of different fonts to 2-3 per website
• Provide fallback fonts in case the custom font fails to load
• Use relative units (em/rem) for responsive text sizing

Common Mistakes with Fonts

• Using too many fonts, making the design look messy
• Poor readability due to very small or fancy fonts
• Not providing fallback fonts
• Ignoring responsive font scaling on different devices