Skip to content
Home Tutorials Roadmaps Courses
Log in Join free
Tutorials CSS Web Fonts
Introduction to CSS
What is CSS? CSS Selectors
Colors & Backgrounds
CSS Colors Backgrounds
Text & Fonts
Text Styling Web Fonts
Box Model
The Box Model Display & Positioning
Layout
Flexbox CSS Grid
Responsive Design
Media Queries Units & Sizing
Animations & Effects
Transitions & Transforms CSS Animations
Advanced CSS
Pseudo-classes & Pseudo-elements CSS Variables & Best Practices
CSS Beginner FREE

Web Fonts

Lesson 2 of 16 Beginner Interactive

Web fonts let you use custom typefaces beyond the limited set of system fonts. Google Fonts is the most popular free web font service.

Using Google Fonts

  1. Go to fonts.google.com
  2. Select the font and weights you need
  3. Add the <link> tag in your HTML head
  4. Use the font-family in your CSS

CSS Font Properties

  • font-family — the typeface to use
  • font-weight — thickness: normal (400), bold (700), or numeric 100-900
  • font-style — style: normal, italic, oblique
  • font-size — size of the text (px, em, rem, %)
  • font — shorthand for all font properties

Font Fallbacks

Always provide fallback fonts: font-family: "Inter", Arial, sans-serif;

Syntax

CSS 
/* Google Fonts Link (in HTML head) */
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

/* CSS Font Properties */
body {
    font-family: "Inter", Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
}

h1 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
}

em {
    font-style: italic;
}

strong {
    font-weight: 700;
}
Using Web Fonts
HTML 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Using Web Fonts</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: "Roboto", sans-serif; }
        .heading { font-family: Georgia, serif; font-size: 32px; font-weight: 700; }
        .mono { font-family: "Courier New", monospace; font-size: 14px; background: #f4f4f4; padding: 4px 8px; }
    </style>
</head>
<body>
    <h1 class="heading">Georgia serif heading (font-size: 32px)</h1>
    <p>Body text uses Roboto, loaded with a Google Fonts link in the head.</p>
    <code class="mono">Courier New monospace, font-size: 14px</code>
</body>
</html>
Try It Yourself

Practice

1
Exercise

Add the Google Font "Roboto" and set it as the body font with Arial as fallback.

Answer 
body {
    font-family: "Roboto", Arial, sans-serif;
}
2
Exercise

Set all h1 elements to use font-weight 700 and font-size 2.5rem.

Answer 
h1 {
    font-weight: 700;
    font-size: 2.5rem;
}

Quick Quiz

1

What is the numeric value for bold font-weight?

Bold has a numeric value of 700.

2

Why should you always provide fallback fonts?

Fallback fonts ensure text remains readable if the custom font cannot be loaded.

Interview Questions

Web fonts require additional HTTP requests and can delay text rendering (FOIT - Flash of Invisible Text, or FOUT - Flash of Unstyled Text). Use font-display: swap in @font-face to show fallback text immediately, preload critical fonts, and only load weights you actually use.

font-weight controls the thickness of characters (100-900, normal, bold). font-style controls the slant (normal, italic, oblique). Italic fonts have specially designed glyphs, while oblique just slants the normal glyphs. Both are distinct typographic properties.

Previous
Text Styling
Tutorial Complete
Back to CSS