Fonts play a very important role in web design. They control how text looks on a website and help improve readability, style, and user experience. Choosing the right font makes your content more attractive and easier to understand.
What are Fonts
A font is the visual appearance of text. It includes the style, size, and design of letters. In CSS, you can control fonts using different properties.
What is Font Family
A font family is a group of related fonts. It allows you to define a list of fonts so the browser can choose the best available option.
Example of font family in CSS
p {
font-family: Arial, Helvetica, sans-serif;
}
In this example, the browser will try Arial first. If it is not available, it will use Helvetica, and if that is also not available, it will use a default sans-serif font.
Types of Font Families
There are five main types of font families in CSS.
Serif fonts
These fonts have small lines at the ends of characters. They look traditional and formal. Example Times New Roman
Sans-serif fonts
These fonts do not have extra lines. They look clean and modern. Example Arial
Monospace fonts
All characters take equal space. These are often used in coding. Example Courier New
Cursive fonts
These fonts look like handwriting. They are more decorative.
Fantasy fonts
These are creative and artistic fonts used for special designs.
Font Properties in CSS
CSS provides several properties to control fonts.
Font family
Defines the font type
h1 {
font-family: Verdana;
}
Font size
Controls the size of the text
p {
font-size: 18px;
}
Font weight
Controls how bold the text is
p {
font-weight: bold;
}
Font style
Used to make text italic or normal
p {
font-style: italic;
}
Using Google Fonts
You can also use custom fonts from online sources like Google Fonts.
Step 1 Copy the font link into your HTML file
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Step 2 Use the font in CSS
body {
font-family: 'Roboto', sans-serif;
}
Best Practices
Use simple and readable fonts for better user experience
Always provide backup fonts in your font family
Avoid using too many different fonts on one page
Use web-safe or trusted fonts for better compatibility
Conclusion
Fonts and font families are essential for creating visually appealing websites. By understanding how to use them in CSS, you can improve both design and readability of your web pages.