← Back to Chapters

CSS Web Fonts & @font-face Rule

? CSS Web Fonts & @font-face Rule

? Quick Overview

CSS Web Fonts let you use custom fonts that are not installed on the user’s system. These fonts can be hosted on services like Google Fonts or served from your own server using the @font-face rule.

This improves branding, readability, and overall design consistency across different devices and operating systems.

? Key Concepts

  • Web Font: A font loaded from the web instead of the user’s local system.
  • Google Fonts: Free library of web fonts you can include using a simple <link> tag.
  • @font-face: CSS rule used to define and load custom font files (e.g. .woff2, .woff, .ttf).
  • Font Formats: Use modern formats like WOFF2 and WOFF for better compression and browser support.
  • Fallback Fonts: Extra fonts in font-family so text still appears even if the main font fails.
  • font-display: Controls how text behaves while the font is loading (e.g. swap).

? Syntax & Theory

There are two popular ways to use web fonts:

  1. Using Google Fonts: Add a generated <link> tag in the <head> and then use the font via font-family.
  2. Using @font-face: Host font files yourself and define them with @font-face, then apply them anywhere on the page.

Basic idea: First tell the browser where to find the font, then use that font name in your CSS.

? Example 1 – Using Google Fonts

Steps to use Google Fonts:

  1. Visit fonts.google.com.
  2. Select a font (e.g., Roboto), choose styles, and copy the provided <link> tag.
  3. Paste the tag inside your HTML <head>.
  4. Apply the font using font-family in CSS.
? View Code Example (Google Fonts) 
<!-- Load Roboto from Google Fonts and apply it to the body -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Fonts Example</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-weight: 700;
}
p {
font-size: 1rem;
}
</style>
</head>
<body>
<h1>This heading uses Roboto</h1>
<p>This paragraph also uses the Roboto web font.</p>
</body>
</html>

? Example 2 – Using @font-face with Local Font Files

Here we host the font files ourselves (e.g., in a fonts/ folder) and define them with @font-face. Then we use that font for headings.

? View Code Example (@font-face) 
/* Register a custom font using @font-face and then use it in headings */
@font-face {
font-family: 'MyFont';
src: url('fonts/MyFont.woff2') format('woff2'),
url('fonts/MyFont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1 {
font-family: 'MyFont', sans-serif;
font-size: 2.2rem;
}

Note: Place the font files in a proper directory like fonts/ and make sure the paths in src are correct. Including both WOFF2 and WOFF improves browser support.

? Live Output / Explanation

? Comparing Different Font Families

Below is a visual comparison using built-in fonts (just for understanding font-family behavior):

This is Arial, a common sans-serif font.
This is Georgia, a serif font suitable for long text.
This is Courier New, a monospace font often used for code.

When you replace these with a Google Font or a custom @font-face font, the layout stays the same but the overall look and feel changes to match your brand.

✅ Tips & Best Practices

  • Use Google Fonts for quick, optimized, and easy integration.
  • Host fonts locally if you need full control, offline usage, or strict privacy.
  • Always provide a font stack with fallbacks: 'MyFont', 'Segoe UI', system-ui, sans-serif.
  • Use font-display: swap; in @font-face to avoid invisible text while fonts load.
  • Limit the number of different font families and weights to keep performance good.

? Try It Yourself / Practice

  • Pick a new font from Google Fonts and apply it to all <p> elements on a sample page.
  • Download a free font (e.g., from fontsquirrel.com) and load it using @font-face.
  • Create a page where:
    • Headings use a custom @font-face font.
    • Body text uses a Google Font.
    • You provide at least two fallback fonts.
  • Experiment with font-display: auto | swap | fallback | optional and observe how text behaves while fonts download.