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.
<!DOCTYPE html> <html> <body> <p style="font-weight: normal;">This is normal text.</p> <p style="font-weight: bold;">This is bold text.</p> <p style="font-weight: lighter;">This is light text.</p> <p style="font-weight: 900;">This is extra bold text.</p> </body> </html>Try this code
Font Style
The font-style property sets the style of the text, such as normal, italic, or oblique.
<!DOCTYPE html> <html> <body> <p style="font-style: normal;">This is text.</p> <p style="font-style: italic;">This is text.</p> <p style="font-style: oblique;">This is text.</p> </body> </html>Try this code
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.