Tutorial 19 of 44 in series

CSS Fonts

Control text fonts in CSS

Abhishek Sharma 2026-05-30 Web Development / Frontend / CSS

43%

Fonts

CSS provides full control over text fonts on your page.

Demo: Different Fonts

HTML

<p class="serif">Serif font (Georgia)</p>
<p class="sans">Sans-serif font (Arial)</p>
<p class="mono">Monospace font (Courier)</p>
<p class="cursive">Cursive font</p>

CSS

.serif { font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; }
.sans { font-family: Arial, Helvetica, sans-serif; font-size: 1.25rem; }
.mono { font-family: "Courier New", Courier, monospace; font-size: 1.25rem; }
.cursive { font-family: "Brush Script MT", cursive; font-size: 1.5rem; }

Live Output Window

The font-family Property

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

The browser uses the first available font in the list (the “font stack”).

Web Fonts with @font-face

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}

Using Google Fonts

Demo: Google Font

HTML

<p class="inter">This uses the Inter font from Google Fonts</p>

CSS

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
.inter {
font-family: Inter, sans-serif;
font-size: 1.25rem;
font-weight: 700;
}

Live Output Window

Font Properties

Property	What It Does
`font-family`	Typeface (font stack)
`font-size`	Size of text
`font-weight`	Boldness (`normal`, `bold`, `400`, `700`, etc.)
`font-style`	Italic or normal
`font-variant`	Small-caps variant
`font`	Shorthand for all font properties

Keep learning

Related tutorials from across the library.

All tutorials

Tutorial2026-05-30

Introduction to CSS

Learn what CSS is and why it matters

Web Development / Frontend / CSS

CSSWeb Development

Tutorial2026-05-30

History of CSS

Understand how CSS evolved

Web Development / Frontend / CSS

CSSWeb Development

Tutorial2026-05-30

Adding CSS

Three ways to add CSS to a page

Web Development / Frontend / CSS

CSSWeb Development