CSS font properties define typography formatting—including font families, web fonts (Google Fonts), font weights, font sizes (rem, em, px), and font styles (italic, normal).
A font stack provides fallback font options if a user's device lacks a specific custom font:
body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 1rem; /* 16px base font size */
font-weight: 400; /* Normal weight (700 = bold) */
font-style: normal;
}
Font properties reference:
font-family: Specifies a prioritized list of font names ending in a generic family (sans-serif, serif, monospace).font-size: Sets text size using rem (root em), em, %, or px.font-weight: Sets text thickness (100 thin to 900 heavy; 400 normal, 700 bold).font-style: Sets italic or normal text (italic, normal).rem vs px)flowchart LR
A["Root <html> font-size: 16px"] --> B["1rem = 16px"]
A --> C["1.25rem = 20px"]
A --> D["2rem = 32px"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Fonts Demonstration</title>
<!-- Import Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap">
<style>
body {
font-family: 'Outfit', system-ui, sans-serif;
background-color: #0f172a;
color: #f8fafc;
padding: 2rem;
}
.title {
font-size: 2.25rem;
font-weight: 700;
color: #38bdf8;
}
</style>
</head>
<body>
<h1 class="title">Modern Web Typography</h1>
<p>Using <code>rem</code> units allows typography to scale automatically with browser zoom preferences!</p>
</body>
</html>
rem units for font sizes: rem units scale relative to user browser accessibility text settings, unlike static px values.font-family declarations with generic keywords (sans-serif, serif, monospace).font-display: swap when importing web fonts: Ensures text remains visible using system fonts while custom web fonts load in the background.Write a CSS rule for h1 setting font-size: 2rem;, font-weight: 700;, and font-family: 'Inter', sans-serif;!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.
You've completed this section! Take a quick 5-question quiz to check your understanding.