The Preload feature in the Breeze Cache plugin helps your website load faster by loading important fonts earlier.
When you preload fonts, they’re fetched by the browser before they’re actually needed, which reduces delays and prevents layout shifts caused by slow font rendering.
In this guide, we’ll show you how to use the Preload tab in Breeze to load custom fonts quickly and efficiently, using either a CSS file or direct font links.
Table of Contents:
How to Use Breeze Preload Settings for Better Font Performance
The Preload settings in Breeze allow you to load important font files earlier, improving site speed and visual stability.
This helps reduce delays and ensures your website’s text looks right from the start, especially on slower connections.
How to Access Preload Settings in Breeze?
Log in to your WordPress Admin Panel.
Go to Settings > Breeze.
Click on the Preload tab to access the options.
What is Font Preloading and Why Use It?
Fonts are a key part of your website’s visual appearance. If they take too long to load, your visitors might see a flash of unstyled text (FOUT) or experience layout shifts.
By using Breeze's Preload option, you can:
Load important fonts early
Improve Core Web Vitals (especially LCP and CLS)
Reduce perceived page load time
Method 1: Preload Font Using a CSS File
You can preload fonts by creating a small, dedicated CSS file that includes only the font definition.
Step-by-Step Instructions:
1. Create a CSS file, e.g., my-fonts.css, and add your font definition:
@font-face {
font-family: '1942-font';
src: url('/wp-content/themes/twentytwentyone/fonts/1942-webfont.woff2') format('woff2'),
url('/wp-content/themes/twentytwenty/fonts/1942-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
2. Upload the CSS file to your active theme’s folder (e.g., /wp-content/themes/your-theme/).
3. In the Breeze Preload tab, add the URL to this CSS file (e.g., /wp-content/themes/your-theme/my-fonts.css) and click Save Changes.
4. Test the font on a post/page:
Add the following code to your content editor:
<p><strong style="font-family:'1942-font'">THIS IS CUSTOM FONT</strong></p>
5. Refresh the page on the front end.
How to Confirm:
Open your browser’s Developer Tools (Right-click > Inspect → Network tab → Reload the page). Check that the font file is loaded before your main CSS file.
Method 2: Preload Font Using Direct Font URL
If you don’t want to use a separate CSS file, you can preload fonts by directly adding the font file URL.
Step-by-Step Instructions:
Ensure that the font is already being loaded through your theme’s CSS, but not preloaded.
In the Breeze Preload tab, paste the direct URL of the font file (e.g.,
/wp-content/themes/your-theme/fonts/custom.woff2) and click Save Changes.Open your website, right-click and choose Inspect, then go to the Network tab and refresh the page.
How to Confirm:
Check that the font is listed near the top and is loaded early — before the main CSS or layout resources.
Important Notes:
Never use your main theme’s CSS file for preloading. It slows things down instead of speeding them up.
The dedicated CSS file should only contain font definitions — nothing else.
If you test both methods, make sure to remove the previous preload method to avoid conflicts.
That’s it! We hope this article was helpful.
Need Help?
If you need assistance, feel free to:
Visit the Cloudways Support Center
Chat with us: Need a Hand > Send us a Message
Or create a support ticket anytime.
We're here 24/7 to help you!