The Spectra star rating block allows designers to display ratings and reviews using a visual star system. The block supports custom rating values, star sizes, and colors, making it suitable for product reviews, testimonials, and satisfaction scores. In the Gutenberg editor, the stars appear correctly with the selected rating value and styling. However, when viewing the page on the live frontend, the stars may appear as empty squares, missing characters, or nothing at all, leaving the rating area blank and uninformative.
This problem can be particularly frustrating because the rest of the page content displays correctly, but the visual element that conveys the rating value is missing. The stars may have worked previously and suddenly stopped working after a plugin update, or they may work on some pages but not on others. Understanding why Spectra star ratings fail to display is essential for maintaining professional review and testimonial displays.
The most common cause of this problem is that the icon library (typically Font Awesome or a similar icon font) is not loading on the frontend, either because it has been deregistered by another plugin or because a caching plugin is blocking it. Another cause is that a security plugin or browser extension is blocking the icon font from loading due to CORS policy or content security policy restrictions.
Why Spectra star ratings fail to display on the frontend
Spectra star ratings use icon fonts (typically Font Awesome) to display the star symbols. Icon fonts are loaded as external CSS and font files that define how each star character should be rendered. If these files are not loaded on the frontend, the browser does not know how to display the star characters, and they appear as empty squares or missing character symbols (often a question mark inside a diamond). The editor loads these files through a different mechanism, which explains why stars appear in the editor but not on the frontend.
Another common cause is that another plugin or the theme is loading a different version of the icon font that conflicts with Spectra’s expectations. If the theme loads Font Awesome 5 while Spectra expects Font Awesome 4, the icon classes may not match, and the wrong characters may be displayed. Similarly, if another plugin deregisters the icon font to load its own version, Spectra may not have access to the icons at all. The browser console may show errors about missing font files or failed resource loads.
Caching plugins that combine or minify CSS files can also break icon fonts by moving the font-face declarations to different locations or changing the relative paths to the font files. When the font files cannot be found, the browser falls back to the default system font, which does not have the star characters, resulting in missing stars. Additionally, some CDN configurations may block font files due to CORS policy restrictions, which can be identified by CORS errors in the browser console.
How to check if icon fonts are loading on the frontend
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 requests to font files with extensions like .woff, .woff2, .ttf, or .otf. Also look for CSS files that contain “font-awesome” or “spectra” in their names. If these files are missing or return 404 errors, the icon fonts are not loading. Check the Console tab for CORS errors or content security policy violations that might be blocking font files from loading.
Step by step guide to fixing Spectra star ratings
Follow these steps in order to restore missing star ratings on the Spectra frontend. Start with the simplest solutions before moving to more advanced troubleshooting steps.
- Clear all caches including plugin cache, CDN cache, and browser cache completely
- Disable all optimization plugins temporarily to test if they block icon fonts
- Check that the icon font CSS files are loading in the network tab
- Add CORS headers for font files if using a CDN or separate domain
- Check the browser console for CORS or content security policy errors
- Regenerate Spectra assets from the Spectra settings panel
- Temporarily deactivate all other plugins to test for icon library conflicts
- Switch to a default WordPress theme to test if the theme deregisters icon fonts
- Update Spectra to the latest version available from the WordPress repository
- Replace the star rating block with a different rating plugin as a temporary workaround
How to add CORS headers for font files on Cloudflare
In Cloudflare dashboard, navigate to Rules → CORS and create a new CORS rule for font files. Add the following settings: “URI Path” contains “.woff” or “.woff2” or “.ttf”, “Allowed Origins” set to “*” or your specific domain, and “Allowed Methods” set to “GET, HEAD, OPTIONS”. Save the rule and purge the CDN cache. For other CDNs like BunnyCDN or KeyCDN, look for CORS settings in their configuration panels and add similar rules to allow cross-origin font requests.
Spectra star ratings troubleshooting reference table
Here is a reference table for diagnosing star rating problems in Spectra based on specific symptoms you might encounter.
| Symptom | Most likely cause | Recommended solution | Stars show as empty squares or missing characters | Icon font not loading on frontend | Check network tab for font file 404 errors | Stars show as wrong characters (different icons) | Icon library version conflict | Check if theme loads different Font Awesome version | Stars work in editor but not on frontend | Caching or optimization plugin issue | Clear caches and disable CSS/JS optimization | Stars appear then disappear on page load | Flash of missing icon before font loads | Preload icon font or use SVG icons instead |
|---|