← Back to CSS Course | Chapter 4: Text & Fonts | Lesson 4 of 10

CSS Fonts

Typeface choice sets the tone for a whole page before a visitor even reads a single word. CSS fonts cover everything from choosing a typeface to controlling its size, weight, and style. font-family names which typeface to use (with fallbacks in case the first choice isn't available), font-size sets how large the text renders, font-weight controls boldness, font-style controls italics, and font-variant offers extra typographic touches like small caps. A shorthand font property can combine several of these into one line. Beyond the handful of 'web safe' fonts every device already has installed, services like Google Fonts let a site like cookiescursor.com use distinctive custom typefaces for free.

In this page:

  1. font-family and Fallback Fonts
  2. font-size and font-weight
  3. font-style and font-variant
  4. Shorthand font Property
  5. Google Fonts and Web Safe Fonts
Syntax
css 
selector {
  font-family: "Font Name", fallback-family;
  font-size: length;
  font-weight: normal | bold | number;
  font-style: normal | italic;
}

font-family and Fallback Fonts

font-family lists which typeface(s) to use, in order of preference. If the first choice isn't available on a visitor's device, the browser tries the next one in the list, ending with a generic fallback like sans-serif or serif.

Note:
  • Always end a font-family list with a generic fallback, it guarantees text stays readable even if every named font fails to load.
  • Accepted values:
  • font-family — comma-separated list; quote names with spaces, e.g. "Open Sans"
  • serif | sans-serif | monospace — the most common generic fallbacks
  • cursive | fantasy — decorative generic families
  • system-ui — the operating system's UI font
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning: Font names containing spaces, like 'Segoe UI', need to be wrapped in quotes inside the font-family value.

Example: font-family and Fallback Fonts

css 
<style>
p {
  font-family: "Segoe UI", Arial, sans-serif;
}
</style>
<p>Falls back through the list if a font isn't available</p>

font-size and font-weight

font-size sets how large text renders, and font-weight sets how bold it appears, from thin (100) through normal (400) to bold (700) and beyond.

Note:
  • Use rem units for font-size where possible, they scale consistently relative to the page's base font size and respect a visitor's browser settings.
  • Accepted values:
  • length — e.g. 16px, 1.25rem, 1.5em
  • keyword — xx-small to xx-large (medium is the default)
  • larger | smaller — relative to the parent's size
  • percentage — relative to the parent's font size
  • font-weight: normal (400), bold (700), or a number from 1 to 1000
  • font-weight: lighter | bolder — relative to the parent
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning: Setting a font-weight the loaded font doesn't actually include may cause the browser to synthesize a fake bold, which can look slightly distorted.

Example: font-size and font-weight

css 
<style>
p {
  font-size: 20px;
  font-weight: 700;
}
</style>
<p>Large, bold text</p>

font-style and font-variant

font-style toggles italics, most commonly normal or italic. font-variant offers extra typographic options, most notably small-caps, which renders lowercase letters as smaller uppercase letters.

Note:
  • Use italics sparingly, for emphasis or citations, since overusing them can make text harder to scan quickly.
  • Accepted values:
  • normal — upright text (initial value)
  • italic — the font's italic face
  • oblique — slanted; may take an angle
  • font-variant: normal | small-caps
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning: Not every font file includes true italic glyphs; without them, the browser may generate a slanted fake italic that can look less refined.

Example: font-style and font-variant

css 
<style>
em {
  font-style: italic;
}
.caps {
  font-variant: small-caps;
}
</style>
<p><em>Italic emphasis</em></p>
<p class="caps">Small caps text</p>

Shorthand font Property

The font shorthand combines style, weight, size, and family into one declaration. Size and family are required, in that order, near the end of the value.

Note:
  • The shorthand is handy once you're comfortable with the individual font properties, but the longhand versions are often clearer while learning.
  • Accepted values:
  • font-size — required, e.g. 16px
  • font-family — required, comes last
  • font-style / font-variant / font-weight — optional, before the size
  • line-height — optional, after size and a slash, e.g. 16px/1.5
  • system fonts — caption, menu, status-bar and others
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning: The font shorthand resets any font property you don't explicitly include back to its default, which can undo settings from elsewhere.

Example: Shorthand font Property

css 
<style>
p {
  font: italic bold 18px "Segoe UI", sans-serif;
}
</style>
<p>Style, weight, size, and family in one line</p>

Google Fonts and Web Safe Fonts

'Web safe' fonts (like Arial, Georgia, and Verdana) are already installed on nearly every device, so they render reliably without any extra loading. Google Fonts is a free service that lets you load custom typefaces beyond that safe list.

Note: Reach for a web safe font stack when reliability matters most, and Google Fonts when a distinctive brand typeface is worth the extra network request.
Warning: A Google Font that hasn't finished loading yet will briefly show a fallback font before swapping, which can cause a small visual flash.

Example: Google Fonts and Web Safe Fonts

css 
<style>
.safe {
  font-family: Arial, Georgia, Verdana, sans-serif;
}
</style>
<p class="safe">Web safe fonts render reliably with no extra loading</p>
Live Example
Related Topics

CSS Text Effects · CSS Text Advanced · CSS Text · CSS Icons

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Specifying only one font in font-family, with no fallback if that font fails to load.
  2. Using a font-weight value the loaded font file doesn't actually support, which browsers may fake or ignore.
  3. Forgetting to link a Google Fonts stylesheet before referencing that font name in font-family.
Chapter Summary
  • font-family, font-size, font-weight, and font-style are the core building blocks of text typography.
  • Always list a generic fallback (like sans-serif) at the end of a font-family list.
  • Google Fonts and other font services let you use custom typefaces beyond the standard web safe fonts.
Browser Support

Standard CSS font properties are supported by every modern browser; Google Fonts works anywhere a browser can load an external stylesheet.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Text Effects Next Lesson → CSS Font Advanced

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.