Custom Font Loading Issues

This article covers how to fix custom fonts that aren't loading or displaying properly on your WordPress website.

Check Your Font Files and Format

First, verify your font files are in the correct format. Web browsers support specific font formats:

• WOFF2 - Best choice for modern browsers
• WOFF - Good fallback for older browsers
• TTF - Works but creates larger file sizes
• OTF - Desktop font format, not ideal for web

If you're using desktop fonts (TTF or OTF files), convert them to web formats using online converters. Upload the converted files to your WordPress media library through your admin dashboard.

Fix CSS Font Loading Code

Incorrect CSS code is the most common cause of font loading issues. Check your font CSS in the customizer or theme editor:

1. Log into your WordPress admin dashboard
2. Go to Appearance → Customize → Additional CSS
3. Look for your font loading code

Correct font loading CSS should look like this:

@font-face {
  font-family: 'YourFontName';
  src: url('your-font-file.woff2') format('woff2'),
       url('your-font-file.woff') format('woff');
  font-display: swap;
}

Common mistakes to fix:

• Missing quotes around font family names
• Incorrect file paths in the url() section
• Missing font-display: swap; property
• Wrong file format declarations

Check Font File Paths and URLs

Broken file paths prevent fonts from loading. If you uploaded fonts to your media library, get the correct URL:

1. Go to Media → Library in WordPress
2. Click on your font file
3. Copy the File URL
4. Use this exact URL in your CSS code

Make sure the URL starts with https:// and points to your Web60 domain. If you moved files or changed your domain recently, you may have broken links that need fixing.

Clear Caching and Test

Caching can show old versions of your site without the new fonts:

1. Clear your browser cache (Ctrl+F5 on Windows, Cmd+Shift+R on Mac)
2. If your site still shows old content, check our guide on cached website versions
3. Test your site in a private/incognito browser window
4. Check on different devices and browsers

Fix Google Fonts Loading Issues

If you're using Google Fonts, the loading method matters:

For theme customizer: Most WordPress themes have built-in Google Fonts options. Use these instead of adding custom code.

For custom CSS: Use the @import method at the very top of your CSS:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

Then apply the font to elements:

body {
  font-family: 'Open Sans', Arial, sans-serif;
}

Always include fallback fonts (like Arial, sans-serif) in case your custom font fails to load.

Check for Plugin Conflicts

Some plugins can interfere with font loading. If fonts stopped working after installing a new plugin, you may have a plugin conflict that needs resolving.

If you're still stuck after trying these steps, contact Web60 support with details about which fonts aren't loading and what method you used to add them.

FAQ

Q: Why do my fonts work on desktop but not mobile?

A: This usually means your font files are too large or you're missing mobile-optimized formats. Use WOFF2 format and include the font-display: swap; CSS property.

Q: Can I use any font on my website?

A: You can only use fonts you have legal permission to use. Google Fonts are free for commercial use. For purchased fonts, check the license allows web embedding.

Q: My Google Fonts are loading slowly. How do I fix this?

A: Add &display=swap to your Google Fonts URL and limit the number of font weights you load. Only load the weights you actually use on your site.

Q: The font shows in the customizer but not on the live site

A: This is usually a caching issue or incorrect file paths. Clear your browser cache and check that your font file URLs are correct and accessible.

Q: Should I upload fonts to WordPress media library or host them elsewhere?

A: Upload them to your WordPress media library. This keeps everything on Web60's servers for faster loading and avoids external dependency issues.

Q: My custom font makes the text invisible

A: Add font-display: swap; to your CSS and include fallback fonts. This shows system fonts while your custom font loads, preventing invisible text.

Q: How many custom fonts can I use without slowing down my site?

A: Limit yourself to 2-3 font families maximum, and only load the weights and styles you actually use. Each additional font increases loading time.