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.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Introduction CSS</h1>
</body>
</html>
Try this code
Font Size
The font-size property sets the size of the text.
You can use pixels, em, rem, percentages, or keywords.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 16px;
}
</style>
</head>
<body>
<p>Introduction CSS</p>
</body>
</html>
Try this code
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
font-family, font-size, and
line-height to create clean and readable text designs.