Are your Font Awesome icons failing to show up in WordPress when served through Azure Front Door (formerly Azure CDN) or any other Content Delivery Network? This common problem happens because browsers block font files loaded from a different domain unless the correct CORS (Cross-Origin Resource Sharing) headers are set. In this blog post, you’ll discover how to resolve the cross-domain WOFF issue on an Apache server, ensuring your Font Awesome icons load reliably across domains.
Table of Contents
Why Font Awesome Icons Fail to Load with Azure Front Door
Azure Front Door (previously Azure CDN) is a robust content delivery solution for caching and accelerating your website’s static files, including fonts, CSS, JavaScript, and images. However, when your website domain (e.g., www.yourdomain.com) requests font files from a different domain (e.g., cdn.yourdomain.com or Azure Front Door’s domain), the browser may block these fonts unless the Access-Control-Allow-Origin header is properly set. This results in missing or broken Font Awesome icons.
The Cross-Domain WOFF Font Issue Explained
Because fonts are loaded as external resources, browsers have strict rules regarding cross-domain file access. The most notable requirement is that servers must explicitly grant permission by including CORS headers like Access-Control-Allow-Origin. Without these headers, the browser prevents fonts from loading—leading to broken icons or missing text glyphs. This issue often affects:
- WOFF/WOFF2: Web Open Font Format.
- TTF/OTF: TrueType or OpenType font formats.
How to Fix the Problem on an Apache Server
Apache servers use mod_headers to manage HTTP headers. By adding a simple rule to your .htaccess file, you can instruct Apache to set the correct headers for font files. This will let your browser load fonts from Azure Front Door (or any other CDN) without cross-domain issues.
Before you begin:
- Ensure mod_headers is active on your Apache server.
- Access to your
.htaccessfile is required (located in the root of your WordPress install).
Step-by-Step: Editing Your .htaccess File
- Locate and backup your existing .htaccess
- Using FTP, SSH, or your hosting control panel, find your WordPress directory.
- Download the
.htaccessfile and keep a backup (e.g.,.htaccess-backup).
- Add the CORS headers
- Paste the following snippet into your
.htaccessfile:
- Paste the following snippet into your
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
- Save and re-upload
- Upload the modified
.htaccessfile to your server, overwriting the old version.
- Upload the modified
Verifying Your Configuration
Once you’ve saved the file, clear your browser cache and visit your WordPress site. If everything is configured correctly:
- Font Awesome icons should now be visible.
- Browser console errors related to CORS or cross-domain font requests should disappear.
- If the issue persists, purge your CDN/Front Door cache to ensure it’s not serving stale files.
Other potential checks include:
- Apache error logs: Confirm no syntax errors in
.htaccess. - Enable only the domains you need: If you want more control, replace
*with the specific domain of your Azure Front Door instance (e.g.,Header set Access-Control-Allow-Origin "https://cdn.yourdomain.com").
Cross-domain WOFF font issues can cripple the visual appeal of your WordPress site, especially when using modern tools like Azure Front Door to serve Font Awesome icons. By applying the correct CORS headers via .htaccess, you can ensure a seamless user experience, boost site performance, and maintain consistent design integrity.
With this simple fix, your icons will always display properly—without that dreaded missing symbol box. Be sure to optimize your setup by purging caches and verifying your config in the browser console, and you’ll be well on your way to a performant, professional-looking WordPress site.