← HTML & CSS

Font properties

A CSS property that sets the typeface for text, accepting a prioritised list of font names with a generic fallback such as serif or sans-serif

Part of: HTML and CSS Journey — Module 41

What it does: font-style: italic renders text in an italicised/slanted form. The font shorthand combines style, weight, size, and family into one declaration. font-family accepts a list of typeface names. font-type does not exist in CSS. The numeric value 700 maps exactly to the bold keyword in CSS font weight. CSS requires an explicit unit for font-size (e.g. px, em, rem). Unitless values are invalid except for line-height. Font names containing spaces must be quoted so CSS can parse them as a single name.

Common mistakes: Font names containing spaces must be quoted. It should be font-family: "Comic Sans", serif;. font-size needs a unit. It should be font-size: 24px; (or another valid unit like em or rem).

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Font properties (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which property sets the typeface of text?
font-familyfont-type
Matches
font-size: 24;
↓
Invalid — font-size must include a unit such as px, em, or rem
Applying
Meanings
Term
font-family
Meaning
A CSS property that sets the typeface for text, accepting a prioritised list of font names with a generic fallback such as serif or sans-serif
Practice
h1 {
Testing
Gaps
p { : Arial, sans-serif; }
Check Answer
Spots
1font-family: Comic Sans, serif;
2font-size: 18px;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Chambered Nautilus' badge — File Explorer, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which property sets the typeface of text?
A. font-family ✓
B. font-type
font-family accepts a list of typeface names. font-type does not exist in CSS.
2. Is font-weight: 700; the same as font-weight: bold;?
A. Yes — 700 equals bold ✓
B. No — they are different
The numeric value 700 maps exactly to the bold keyword in CSS font weight.
3. Which value makes text slant to the right using font-style?
A. italic ✓
B. bold
font-style: italic; slants text. font-style: bold; is invalid — boldness is set with font-weight.
4. Must you always include a fallback generic font in font-family?
A. Best practice — yes ✓
B. No — one font name is enough
Including a generic fallback like sans-serif ensures text still renders if the primary font is unavailable.
5. Does font-size: 24; (without a unit) work in CSS?
A. No — a unit is required ✓
B. Yes — px is assumed
CSS requires an explicit unit for font-size (e.g. px, em, rem). Unitless values are invalid except for line-height.

Match the Pairs

font-family: Arial, sans-serif; → Sets the typeface to Arial with sans-serif as a fallback
font-weight: bold; → Makes text appear heavier/thicker — equivalent to the numeric value 700
font-style controls slant (italic or normal) → font-style: italic;
The font shorthand sets size and family at minimum → font: italic bold 18px Georgia;
font-size: 24; → Invalid — font-size must include a unit such as px, em, or rem
font-family: Times New Roman, serif; → Invalid — multi-word font names must be wrapped in quotes: "Times New Roman"

Key Term

font-family
A CSS property that sets the typeface for text, accepting a prioritised list of font names with a generic fallback such as serif or sans-serif

Fill in the Blanks

1. p { font-family: Arial, sans-serif; }
Hint: Type the CSS property that sets the typeface
2. h1 { font-size: 32px; }
Hint: Type the CSS property that sets how large the text appears
3. p { font-weight: bold; }
Hint: Type the keyword that makes text bold
4. em { font-style: italic; }
Hint: Type the value that makes text slant to the right
5. p { font: bold 16px Arial; }
Hint: Type the shorthand property that sets weight, size, and family together

Spot the Error

Question 1
A font-family: Comic Sans, serif;
B font-size: 18px;
C font-weight: bold;
Line A — Font names containing spaces must be quoted. It should be font-family: "Comic Sans", serif;
Question 2
A h2 {
B font-size: 24;
C font-weight: bold;
D }
Line B — font-size needs a unit. It should be font-size: 24px; (or another valid unit like em or rem)
Question 3
A p {
B font-family: Arial, sans-serif;
C font-stile: italic;
D }
Line C — font-stile is a misspelling. The correct property name is font-style: italic;
Question 4
A p {
B font-family: Arial;
C font-weight: 700;
D font-size: normal;
E }
Line D — normal is not a valid value for font-size. It should be a length like 16px or a keyword like medium
Question 5
A h1 {
B font-size: 2em;
C font-style: italic;
D font-family: Georgia serif;
E }
Line D — Multiple font names must be separated by commas. It should be font-family: Georgia, serif;
For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?