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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Example of font family in CSS<\/p>\n\n\n\n
p {
font-family: Arial, Helvetica, sans-serif;
}<\/pre>\n\n\n\nIn 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.<\/p>\n\n\n\n
Types of Font Families<\/h3>\n\n\n\n
There are five main types of font families in CSS.<\/p>\n\n\n\n
Serif fonts
These fonts have small lines at the ends of characters. They look traditional and formal. Example Times New Roman<\/p>\n\n\n\n
Sans-serif fonts
These fonts do not have extra lines. They look clean and modern. Example Arial<\/p>\n\n\n\n
Monospace fonts
All characters take equal space. These are often used in coding. Example Courier New<\/p>\n\n\n\n
Cursive fonts
These fonts look like handwriting. They are more decorative.<\/p>\n\n\n\n
Fantasy fonts
These are creative and artistic fonts used for special designs.<\/p>\n\n\n\n
Font Properties in CSS<\/h3>\n\n\n\n
CSS provides several properties to control fonts.<\/p>\n\n\n\n
Font family
Defines the font type<\/p>\n\n\n\n
h1 {
font-family: Verdana;
}<\/pre>\n\n\n\nFont size
Controls the size of the text<\/p>\n\n\n\n
p {
font-size: 18px;
}<\/pre>\n\n\n\nFont weight
Controls how bold the text is<\/p>\n\n\n\n
p {
font-weight: bold;
}<\/pre>\n\n\n\nFont style
Used to make text italic or normal<\/p>\n\n\n\n
p {
font-style: italic;
}<\/pre>\n\n\n\nUsing Google Fonts<\/h3>\n\n\n\n
You can also use custom fonts from online sources like Google Fonts.<\/p>\n\n\n\n
Step 1 Copy the font link into your HTML file<\/p>\n\n\n\n
<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto&display=swap\" rel=\"stylesheet\"><\/pre>\n\n\n\nStep 2 Use the font in CSS<\/p>\n\n\n\n
body {
font-family: 'Roboto', sans-serif;
}<\/pre>\n\n\n\nBest Practices<\/h3>\n\n\n\n
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<\/p>\n\n\n\n
Conclusion<\/h3>\n\n\n\n
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.<\/p>\n\n\n