CSS Fonts
CSS Fonts control the typeface, size, weight, and style of text on a web page. The font-family property is the most important — it defines the typeface used. CSS also supports Google Fonts and custom fonts via @font-face.
Key CSS Font Properties
font-family
Sets the typeface — Arial, Georgia, 'Sora', sans-serif, etc.
font-size
Sets the size — px, em, rem, %.
font-weight
Controls boldness — normal, bold, 100-900.
font-style
Italic or normal.
font-variant
Small caps or normal.
font (shorthand)
Combines style, weight, size, line-height, family.
Font Syntax
body {
font-family: 'Sora', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 1.6;
}
/* Shorthand: style weight size/line-height family */
body { font: italic 700 18px/1.5 'Sora', sans-serif; }
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap');
Introduction
CSS provides complete control over typography using properties like font-family, font-size, font-style, font-weight, and custom web fonts.
Font Style Example
This example demonstrates italic, oblique, and normal font styles.
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-size:100%;
background-color:#ADCACA;
}
h2{
font-style:italic;
}
h3{
font-style:oblique;
}
h4{
font-style:normal;
}
</style>
</head>
<body>
<h2>
This heading is italic.
</h2>
<h3>
This heading is oblique.
</h3>
<h4>
This heading is normal.
</h4>
</body>
</html>
- italic: Displays slanted italic text.
- oblique: Displays slightly slanted text.
- normal: Displays regular font style.
Font Size Example
This example demonstrates different CSS font-size values.
<html>
<head>
<style>
body{
background-color:#CCD1D1;
text-align:center;
}
</style>
</head>
<body>
<p style="font-size:small;">
Small Font
</p>
<p style="font-size:medium;">
Medium Font
</p>
<p style="font-size:large;">
Large Font
</p>
<p style="font-size:x-large;">
Extra Large Font
</p>
<p style="font-size:200%;">
200% Font Size
</p>
<p style="font-size:20px;">
20px Font Size
</p>
</body>
</html>
Font Property Reference
| Property | Description |
|---|---|
| font-family | Sets the font typeface |
| font-size | Controls text size |
| font-style | Applies italic or oblique style |
| font-weight | Controls text boldness |
| line-height | Controls spacing between lines |
Important Notes
- Use readable font sizes for better UX.
- Use web-safe fonts for compatibility.
- Font styling improves website appearance.
- Consistent typography improves readability.
Conclusion
CSS font properties provide powerful typography control for creating modern, readable, and visually attractive websites.
Font Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Sora', Arial, sans-serif; padding: 30px; }
h1 { font-size: 36px; font-weight: 700; }
h2 { font-family: Georgia, serif; font-style: italic; }
p { font-size: 16px; line-height: 1.7; }
.mono { font-family: 'Courier New', monospace; }
</style>
</head>
<body>
<h1>PBA Institute</h1>
<h2>Beautiful Typography Matters</h2>
<p>This paragraph uses the Sora font for a clean, modern look.</p>
<p class="mono">This text uses a monospace font.</p>
</body>
</html>
Code Explanation
font-family: Lists fonts in order of preference; browser picks the first available.- Fallback fonts: Always end with a generic family like sans-serif or serif.
- Google Fonts: Use a
<link>tag to import web fonts. font-weight: 700: Equivalent to bold.
Font Property Reference
| Property | Values | Purpose |
|---|---|---|
font-family |
name1, name2, generic | Typeface stack with fallback |
font-size |
16px / 1em / 1rem | Text size |
font-weight |
100 - 900 / normal / bold | Boldness |
font-style |
normal / italic / oblique | Slant |
font-variant |
normal / small-caps | Capitalization variant |
line-height |
number / px / % | Line spacing |
Generic Font Families
serif
Has small lines at the end of strokes — Times, Georgia.
sans-serif
Clean, modern, no serifs — Arial, Sora, Roboto.
monospace
Equal-width characters — Courier, Consolas.
Common Font Values
Important Notes
- Always provide fallbacks: If the first font fails to load, the next is used.
- Use rem for scalability: rem scales with the root font-size.
- Limit fonts: Use 1-2 font families per page for clean design.
- Optimize Google Fonts: Load only the weights you actually use.
Real-World Use Cases
Branding
Use a custom font to reinforce brand identity.
Readable Articles
Serif fonts work well for long-form content.
Code Blocks
Use monospace for code snippets.
Practice Questions
- Apply the font Arial with fallback sans-serif to the body.
- Make a heading bold using font-weight: 700.
- Import the Google Font 'Roboto' and use it for paragraphs.
- Set a monospace font for code blocks.
- Use the font shorthand to combine style, weight, size, and family.
Frequently Asked Questions
- How to use Google Fonts: Add the <link> tag from fonts.google.com and reference the font in your CSS.
- What is a fallback font: A backup font listed after the primary, in case the primary fails to load.
- Difference between px, em, rem: px is absolute; em is relative to parent; rem is relative to the root element.
- How to make text bold: Use
font-weight: boldorfont-weight: 700.
Conclusion
Fonts shape the personality of every web page. By combining the right font-family, size, weight, and line-height, you can create readable, branded, and beautiful typography that delights users.
CSS All Topics
Continue Learning
Previous
Go to CSS Text Chapter