Font loading problems can affect the visual appearance of your DigiBlocks. This guide covers common font-related issues and their solutions.
Understanding DigiBlocks Font Loading
DigiBlocks supports two font loading methods:
CDN Loading (Default): Fonts are loaded directly from Google Fonts servers Local Loading: Fonts are downloaded and served from your WordPress site
You can switch between these methods in DigiBlocks > Settings > Google Fonts Settings.
Common Font Loading Issues
Fonts Not Loading at All
If fonts aren’t loading on your site, check these areas:
Verify Font Settings Navigate to DigiBlocks > Settings and ensure your font loading preference is configured correctly. The “Download Google Fonts Locally” toggle controls whether fonts are served from your server or Google’s CDN.
Check Generated Assets Font assets are automatically generated when you save posts containing DigiBlocks. If fonts aren’t loading, your CSS files might be missing or corrupted.
Inspect Browser Console Open your browser’s developer tools (F12) and check the Console tab for font-related errors. Common errors include:
- Failed to load font files (404 errors)
- CORS policy violations
- Network connectivity issues
Local Fonts Not Working
When using local font loading, fonts are downloaded to your server. If this isn’t working:
Check Upload Directory Permissions Ensure your WordPress uploads directory has proper write permissions. DigiBlocks stores font files in /wp-content/uploads/digiblocks/.
Verify Font File Generation After switching to local fonts, the plugin needs to download and process font files. This happens automatically, but may take time for sites with many fonts.
Server Storage Space Local fonts require additional server storage. Ensure your hosting account has sufficient space for font files.
CDN Fonts Blocked
Some security plugins or server configurations may block external font requests:
Security Plugin Settings Check if security plugins are blocking requests to fonts.googleapis.com or fonts.gstatic.com.
Content Security Policy If your site uses CSP headers, ensure they allow font loading from Google’s domains:
font-src 'self' fonts.gstatic.com;
style-src 'self' fonts.googleapis.com;Slow Font Loading
Fonts loading slowly can cause layout shifts and poor user experience:
Switch to Local Loading Local fonts typically load faster than CDN fonts. Enable “Download Google Fonts Locally” in DigiBlocks settings.
Font Subset Optimization DigiBlocks automatically optimizes font subsets, but you can verify this is working by checking the generated CSS files.
Preload Critical Fonts Consider preloading essential fonts in your theme’s header for faster rendering.
Regenerating Font Assets
If fonts aren’t working correctly, regenerate all assets:
- Go to DigiBlocks > Settings
- Click Regenerate All Assets
- Wait for the process to complete
This recreates all font files and CSS, resolving most font-related issues.
Font Display Issues
FOUT (Flash of Unstyled Text)
If you see text briefly appear in system fonts before switching to web fonts:
Font Display Strategy DigiBlocks uses font-display: swap by default, which prioritizes content visibility over font loading.
Font Loading Optimization Switch to local font loading for more consistent font rendering.
Font Weight or Style Issues
If fonts appear bolder, lighter, or in incorrect styles:
Check Font Variants Ensure the font weights and styles you’re using are actually available for your selected font family.
CSS Conflicts Inspect your site’s CSS to identify conflicts with DigiBlocks font styles.
Advanced Troubleshooting
Server Configuration Issues
Memory Limits Font processing requires adequate PHP memory. Increase memory limits if you encounter timeout errors.
Execution Time Font downloading may require extended execution time. Ensure your server allows sufficient processing time.
File System Issues
Write Permissions DigiBlocks needs write access to create font files in the uploads directory.
File Path Issues Verify that font file URLs are correctly generated and accessible via direct browser access.
Caching Problems
Plugin Caching Clear caching plugin storage after changing font settings or regenerating assets.
Browser Caching Force refresh (Ctrl+F5 or Cmd+Shift+R) to bypass cached font files.
CDN Caching If using a CDN, purge cached CSS and font files after making changes.
Prevention Tips
Regular Asset Regeneration Periodically regenerate assets, especially after plugin updates or significant changes.
Monitor File Sizes Keep track of your uploads directory size when using local fonts, as this can grow substantially.
Test Font Changes Always test font modifications on a staging site before applying to production.
Backup Font Settings Document your font configurations before making changes for easy restoration if needed.