CSS Web Fonts

Master typography with Google Fonts and custom fonts

🔤 What are Web Fonts?

Web fonts allow you to use custom typography beyond system fonts. Google Fonts, Adobe Fonts, and custom font files give you unlimited design possibilities. 


/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

.custom-font {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

Output:

Beautiful Roboto Typography

Font Categories

📖

Serif Fonts

Traditional fonts with decorative strokes 

font-family: 'Playfair Display', serif;
🔤

Sans-Serif

Clean, modern fonts without strokes 

font-family: 'Roboto', sans-serif;
💻

Monospace

Fixed-width fonts for code 

font-family: 'Fira Code', monospace;
✍️

Display Fonts

Decorative fonts for headings 

font-family: 'Dancing Script', cursive;

🔹 Google Fonts Integration

Integrating Google Fonts involves linking a stylesheet in the HTML head and applying the font-family in CSS. This provides a vast library of free, performance-optimized web fonts with easy CDN delivery. Best practices include selecting font weights strategically, using font-display: swap to avoid invisible text during loading, and subsetting fonts when possible. Google Fonts enhances typographic variety while maintaining fast load times, cross-browser consistency, and global availability for modern web projects.

<!-- Method 1: HTML Link -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

<!-- Method 2: CSS Import -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
</style>
/* Using the imported font */
.roboto-light {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

.roboto-regular {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

.roboto-bold {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

Output:

Roboto Light (300)
Roboto Regular (400)
Roboto Bold (700)

🔹 Font Display Examples

Font display strategies affect performance and user experience during font loading. The font-display property options include swap (immediately shows fallback, then swaps), block (briefly hides text), fallback (short block period then fallback), and optional (relies heavily on fallback). Choosing the right strategy balances perceived performance with visual consistency. Demonstrations show how each setting behaves, helping developers optimize typography for speed, especially on slow networks.

.serif-example {
    font-family: 'Playfair Display', serif;
    font-size: 2em;
    font-weight: 700;
}

.sans-serif-example {
    font-family: 'Roboto', sans-serif;
    font-size: 1.8em;
    font-weight: 400;
}

.monospace-example {
    font-family: 'Fira Code', monospace;
    font-size: 1.2em;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
}

Output:

Elegant Serif Heading
Clean Sans-Serif Text
const code = 'Monospace Font';

🔹 Custom Font Files

Custom fonts are loaded via @font-face rule, specifying font files (WOFF2, WOFF, TTF) and properties like font-family, font-weight, and font-style. This method supports brand typography, icon fonts, and unique typefaces not available on Google Fonts. Optimize by using WOFF2 compression, subsetting characters, and setting font-display: swap. Custom fonts enhance visual identity but require careful performance management to avoid layout shifts and slow page rendering.

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/mycustomfont.woff2') format('woff2'),
         url('fonts/mycustomfont.woff') format('woff'),
         url('fonts/mycustomfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Improves loading performance */
}

.custom-font {
    font-family: 'MyCustomFont', Arial, sans-serif;
    font-size: 1.5em;
}

/* Font with multiple weights */
@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont-regular.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont-bold.woff2') format('woff2');
    font-weight: 700;
}

🔹 Font Performance Tips

Optimize font performance by using WOFF2 format, limiting the number of font weights and styles, subsetting characters, and leveraging font-display: swap. Preload critical fonts in the HTML head, and use local() fallbacks when possible. Asynchronous loading and font loading APIs can reduce render-blocking. These techniques minimize layout shifts (CLS), improve Largest Contentful Paint (LCP), and ensure text remains visible during webfont loading, enhancing both user experience and Core Web Vitals scores.

/* Use font-display for better loading */
@font-face {
    font-family: 'OptimizedFont';
    src: url('font.woff2') format('woff2');
    font-display: swap; /* Shows fallback font while loading */
}

/* Preload important fonts */
/* Add to HTML head: */
/* <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> */

/* Font fallback stack */
.optimized-text {
    font-family: 'CustomFont', 'Helvetica Neue', Arial, sans-serif;
    /* Fallback fonts ensure text is always readable */
}

/* Variable fonts for multiple weights */
@font-face {
    font-family: 'VariableFont';
    src: url('variable-font.woff2') format('woff2-variations');
    font-weight: 100 900; /* Supports all weights from 100 to 900 */
}

🧠 Test Your Knowledge

Which CSS rule is used to import custom fonts?