In CSS, fonts can be styled and customized using a variety of properties. These properties allow you to control the typeface, size, weight, style, and more.
Font Properties:
font-family
The font-family property specifies the font for an element. You can list multiple fonts as a “fallback” system, starting with your preferred font and ending with a generic family name (e.g., serif, sans-serif, monospace).
p {
font-family: 'Arial', 'Helvetica', sans-serif;
}
font-size
The font-size property sets the size of the font. It can be specified in various units, including pixels (px), ems (em), rems (rem), percentages (%), and viewport units (vw, vh).
p {
font-size: 16px; /* Sets the font size to 16 pixels */
font-size: 1em; /* Equivalent to the current font size of the parent element */
font-size: 1rem; /* Equivalent to the root element's font size */
font-size: 100%; /* Equivalent to the parent element's font size */
font-size: 2vw; /* 2% of the viewport width */
}
font-weight
The font-weight property specifies the thickness of the characters. It can take values like normal, bold, bolder, lighter, or numerical values ranging from 100 to 900.
p {
font-weight: normal; /* Standard weight */
font-weight: bold; /* Bold weight */
font-weight: 700; /* Numeric value (bold) */
font-weight: 400; /* Numeric value (normal) */
}
font-style
The font-style property defines the style of the font, such as normal, italic, or oblique.
p {
font-style: normal; /* Normal text */
font-style: italic; /* Italic text */
font-style: oblique; /* Oblique text (slightly slanted) */
}
Important Font Notes:
Using Web Fonts: To use web fonts like Google Fonts, you can import them into your CSS.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Font Fallbacks: Always provide fallback fonts to ensure text is displayed properly even if a preferred font is unavailable.
p {
font-family: 'Georgia', 'Times New Roman', Times, serif;
}
Responsive Design: Use relative units like em or rem for font sizes to ensure your text scales appropriately across different devices.
p {
font-size: 1.2rem; /* 1.2 times the root font size */
}