Oxygen Builder provides several ways to add custom fonts to a website, including Google Fonts integration, Adobe Fonts integration, and the ability to upload custom font files directly. Using custom fonts is essential for creating a unique brand identity that stands out from generic system fonts. However, a common frustration among Oxygen users is that custom fonts work perfectly in the Oxygen editor preview but completely fail to load on the live frontend, leaving visitors to see fallback fonts that ruin the carefully designed typography.
This problem can be particularly difficult to diagnose because the editor preview uses the same CSS rules that should apply to the frontend. When the editor shows the correct custom font but the frontend does not, something is blocking the font files from loading or being applied. The result is a website that looks professional and polished in the builder but appears broken and amateurish to actual visitors, with the wrong fonts appearing throughout the site.
The most common cause of this problem is that the custom font files have incorrect file permissions, preventing the web server from serving them to browsers. Another cause is that the font files are being blocked by CORS (Cross-Origin Resource Sharing) policies, especially when fonts are hosted on a different domain or subdomain than the main website. Google Fonts or Adobe Fonts may also be blocked by ad blockers or privacy-focused browser extensions that prevent loading external resources.
Why Oxygen Builder custom fonts fail to load on the frontend
When custom font files are uploaded directly to the WordPress media library or to a custom directory, Oxygen Builder generates CSS with @font-face rules that point to those files. The browser then downloads the font files and applies them to the text elements specified in the design. If the browser cannot download the font files because they are inaccessible, it will fall back to the next available font in the font-family stack, which is usually a standard system font like Arial or Times New Roman.
File permission issues are a common reason why browsers cannot download custom font files. The web server user needs read access to the font files, and the files need to have permissions set to 644 (readable by everyone). Directories containing font files should have permissions set to 755. If permissions are set too restrictively (like 600 or 640), the web server cannot read the files, and the browser receives a 403 Forbidden error when trying to download them.
CORS issues occur when font files are hosted on a different domain than the website. For security reasons, browsers block font files loaded from external domains unless those domains explicitly allow it through CORS headers. This commonly happens when using a CDN to serve font files, or when the website is on a www domain but the font files are loaded from a non-www domain. Adding the appropriate CORS headers to the server configuration solves this problem.
How to check if custom font files are accessible to the browser
Open the frontend of the website in a web browser and open the developer tools by pressing F12. Navigate to the Network tab and reload the page, then look for font file requests (files ending in .woff, .woff2, .ttf, or .otf). Check the HTTP status code for these requests. A 200 status code means the font loaded successfully. A 404 status code means the font file is missing from the server. A 403 status code indicates a permission issue that prevents the file from being read.
Step by step guide to fixing Oxygen Builder custom font problems
Follow these steps in order to restore custom font loading on the Oxygen Builder frontend. Start with the simplest solutions before moving to more advanced troubleshooting steps.
- Check that the font file permissions are set to 644 (readable by the web server)
- Ensure that the directory containing font files has permissions set to 755
- If using a CDN, add CORS headers to the CDN configuration for font files
- Clear all caches including plugin cache, CDN cache, and browser cache completely
- Regenerate Oxygen Builder CSS from the settings panel after making font changes
- Check that the font file paths in the CSS are correct and not pointing to old locations
- Disable any security plugins temporarily to test if they block font file access
- Test loading fonts from the same domain (no CDN) to isolate CORS issues
- Update Oxygen Builder to the latest version available from the official website
- Contact Oxygen Builder support with specific details about which fonts are not loading
How to add CORS headers for custom fonts on Apache servers
Add the following code to the .htaccess file in the directory where font files are stored, or in the root .htaccess file of the website. This code tells the browser to allow font files to be loaded from external domains when necessary. <FilesMatch ".(ttf|otf|woff|woff2)$"> After adding this code, clear all caches and test the font loading again.
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
Oxygen Builder custom font troubleshooting reference table
Here is a reference table for diagnosing custom font problems in Oxygen Builder based on specific symptoms you might encounter.
| Symptom | Most likely cause | Recommended solution |
|---|---|---|
| Font works in editor but not on frontend | Font files inaccessible or permission issues | Check file permissions and ensure files exist in correct location |
| Font loads but appears as bold when it should be regular | Wrong font weight specified in CSS | Check that the correct font weight is selected in Oxygen Builder settings |
| Google Fonts not loading on frontend | Ad blocker or privacy extension blocking Google Fonts | Host Google Fonts locally using OMGF plugin or similar |
| Font loads on some pages but not others | Page-specific CSS or font declarations missing | Check that font is applied globally or added to all templates |
For more information about Oxygen Builder typography, visit the Oxygen Builder page on wpwizzy.com.
Preventing Oxygen Builder custom font problems in the future
Always test custom fonts on the live frontend immediately after adding them in Oxygen Builder, rather than assuming they will work because they appear in the editor. Set correct file permissions on font files during the initial upload process, and document the location of custom font files for future reference. Use a staging website to test font configurations before deploying them to the live production site, especially when using custom uploaded fonts rather than standard Google Fonts.
Consider hosting Google Fonts locally using a plugin like OMGF (Optimize My Google Fonts) to avoid ad blocker issues and improve performance. Keep Oxygen Builder and all other plugins updated to their latest versions on a regular schedule, and regularly check the frontend after updates to ensure custom fonts are still loading correctly. Monitor browser console errors for font loading failures, as these errors provide valuable clues about what is preventing the fonts from appearing.