386+ Tools Comprehensive Tools for Webmasters, Developers & Site Optimization

Web Font Loader Generator - Generate @font-face CSS Code

Web Font Loader Generator

For Google Fonts, use the exact font family name
Controls how text renders while font loads

Understanding Web Font Loading

Web fonts enhance your site's typography but can impact performance if not loaded efficiently. This tool generates optimized code for loading Google Fonts or custom fonts with best practices.

Font-Display Values Explained
Value Behavior Best For
swap Shows fallback font immediately, swaps when custom font loads Most sites (recommended)
block Hides text for ~3s, then shows fallback if font hasn't loaded Icon fonts
fallback Very short block period (~100ms), then swap with 3s window Body text where performance is critical
optional Very short block, browser decides whether to use custom font Slow connections where fallback is acceptable
auto Browser default behavior Legacy support
Loading Google Fonts (Optimized)
<!-- 1. Preconnect to Google Fonts domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- 2. Load the font stylesheet -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<!-- 3. Use in CSS -->
<style>
  body {
    font-family: 'Roboto', sans-serif;
  }
</style>
Custom @font-face Implementation
/* Define the font */
@font-face {
  font-family: 'YourFont';
  src: url('/fonts/yourfont.woff2') format('woff2'),
       url('/fonts/yourfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Preload the most important font */
<link rel="preload"
      href="/fonts/yourfont.woff2"
      as="font"
      type="font/woff2"
      crossorigin>

/* Use the font */
body {
  font-family: 'YourFont', -apple-system, system-ui, sans-serif;
}
Font Loading Best Practices
  • Use WOFF2 format: Best compression, supported by all modern browsers
  • Preload critical fonts: Add preload hints for fonts used above the fold
  • Limit font variants: Only load weights and styles you actually use
  • Use font-display: swap: Prevents invisible text while fonts load
  • Subset fonts: Include only the characters you need
  • Self-host when possible: Faster than third-party CDNs, better privacy
  • Provide fallback fonts: Use system fonts as fallbacks
  • Use preconnect: For Google Fonts, preconnect to their domains
Font Fallback Stack

Always provide a fallback stack in case custom fonts fail to load:

/* Serif fonts */
font-family: 'YourSerif', Georgia, 'Times New Roman', Times, serif;

/* Sans-serif fonts */
font-family: 'YourSans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

/* Monospace fonts */
font-family: 'YourMono', 'Courier New', Courier, monospace;
Testing Font Performance
  • Use Chrome DevTools Network tab to check font loading times
  • Test with throttled connections to simulate slow networks
  • Check Lighthouse performance score for font-related issues
  • Verify fonts load correctly with browser cache disabled

Related Tools