CSS Fonts

CSS font properties control the appearance of text at a typographic level — including which font typeface is used, how large the text is, how thick or thin it appears, and whether it is italicized. Choosing the right fonts significantly affects the readability and personality of a web page.

CSS Font Properties Overview

Property	Description
`font-family`	Sets the typeface (font name)
`font-size`	Sets the size of the text
`font-weight`	Sets how bold or thin the text is
`font-style`	Sets italic or normal style
`font-variant`	Sets small-caps style
`font`	Shorthand for all font properties

1. font-family

The font-family property specifies the font typeface to use. A font stack (a list of fonts separated by commas) is best practice — the browser uses the first available font in the list. The last value should always be a generic family as a fallback.

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
}

h1 {
    font-family: Georgia, "Times New Roman", serif;
}

code {
    font-family: "Courier New", Courier, monospace;
}

Generic font families:

serif – Fonts with small decorative strokes at the ends of letters (e.g., Times New Roman, Georgia).
sans-serif – Fonts without decorative strokes, cleaner and more modern (e.g., Arial, Helvetica).
monospace – All characters have equal width, used for code (e.g., Courier New).
cursive – Handwriting-style fonts.
fantasy – Decorative or display fonts.

2. font-size

Controls how large the text appears.

body {
    font-size: 16px;   /* Standard base size */
}

h1 { font-size: 36px; }
h2 { font-size: 28px; }
p  { font-size: 1rem; }   /* 1rem = root font size (usually 16px) */

.small-text {
    font-size: 0.875rem;  /* 14px when root is 16px */
}

3. font-weight

Controls how thick or thin the text appears.

p          { font-weight: normal; }    /* Default weight = 400 */
strong     { font-weight: bold; }     /* Bold = 700 */
.light     { font-weight: 300; }      /* Light */
.heading   { font-weight: 700; }      /* Bold using numeric value */
.extra-bold { font-weight: 900; }     /* Extra heavy */

Numeric values range from 100 (very thin) to 900 (very heavy). Not all fonts support all weights — only the weights the font file includes will display.

4. font-style

Sets whether text appears in italic, oblique, or normal style.

em          { font-style: italic; }
.slant      { font-style: oblique; }  /* Slightly slanted — similar to italic */
.no-italic  { font-style: normal; }   /* Removes italic from elements like <em> */

5. font-variant

Displays text in small capital letters (small-caps). This makes lowercase letters look like slightly smaller uppercase letters.

p.intro {
    font-variant: small-caps;
}

6. font Shorthand

All font properties can be combined into one shorthand declaration. The order is: font-style font-variant font-weight font-size/line-height font-family.

/* Shorthand */
p {
    font: italic normal 400 16px/1.6 "Arial", sans-serif;
}

/* Equivalent longhand */
p {
    font-style: italic;
    font-variant: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    font-family: "Arial", sans-serif;
}

Using Google Fonts

Google Fonts is a free library of web fonts. To use a Google Font, import it in the HTML <head> and then reference it in CSS.

Step 1 — Add the link in HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Step 2 — Use it in CSS

body {
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

Complete Typography Example

body {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #333;
}

h1 {
    font-size: 2.25rem;
    font-weight: 700;
    font-style: normal;
}

h2 {
    font-size: 1.75rem;
    font-weight: 600;
}

.caption {
    font-size: 0.875rem;
    font-style: italic;
    font-variant: small-caps;
}

Summary

font-family defines which typeface is used, always paired with a fallback font stack. font-size controls text scale — using rem is recommended for accessible and scalable designs. font-weight handles boldness, and font-style handles italics. Google Fonts provides hundreds of free web fonts that can be imported and used in any project. The font shorthand combines all properties into a single efficient declaration.

Previous lessons

Back to courses

Next lessons