Web Font Troubleshooting: Complete Guide

Symptoms:

• • Fonts don't load, fallback font displays
• • Network tab shows red 404 error
• • Console may show "Failed to load resource"

Common Causes:

• • Wrong path: url('/fonts/font.woff2') but file is at /assets/fonts/
• • Case sensitivity: Server is case-sensitive, font.WOFF2 vs font.woff2
• • File not uploaded: Font exists locally but not on server
• • Typo: Misspelled filename in @font-face

Solutions:

1. Check Network tab: exact URL browser is requesting
2. Verify file exists at that exact path on server
3. Test URL directly in browser address bar
4. Match case exactly (Linux servers are case-sensitive)
5. Use absolute paths if relative paths problematic: url('https://yoursite.com/fonts/font.woff2')

Symptoms:

• • Console shows "Access to font blocked by CORS policy"
• • Font file loads (200 status) but isn't applied
• • Occurs when font hosted on different domain/CDN

Cause:

Browsers require CORS headers for cross-origin font requests as security measure.

Solutions:

# Apache (.htaccess)
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# Nginx
location ~* \.(woff|woff2|ttf|otf|eot)$ {
  add_header Access-Control-Allow-Origin *;
}

2. Or self-host fonts on same origin (no CORS needed)

Symptoms:

• • Bold text looks fake or too bold
• • Italic appears slanted rather than true italic
• • Browser synthesizing instead of using actual font files

Cause:

Missing @font-face declarations for bold/italic, or incorrect font-weight/font-style descriptors

Solution: Declare all variations correctly

/* Regular */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/font-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* Bold - separate declaration */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/font-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* Italic - separate declaration */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/font-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}