CSS Fonts

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 */
}

CSS Fonts – Interview Questions

CSS Fonts – Objective Questions (MCQs)

Related CSS Fonts Topics