The Fonts tab helps optimize how fonts load on your WordPress site.
Fonts can affect both performance and visual stability. Large font files, externally hosted Google Fonts, icon fonts, and late-loading font assets can slow down rendering or cause visible text changes while the page loads.
MinimalCSS includes font optimization tools to help improve font delivery while giving you control over which fonts should be preloaded automatically or manually.
What the Fonts Tab Is For
The Fonts tab is used to manage font-related performance settings.
Depending on your site, this may include:
- Serving Google Fonts locally
- Preloading critical fonts
- Scanning your site for font usage
- Reviewing detected text fonts
- Reviewing detected icon fonts
- Choosing which fonts should be preloaded
- Keeping font preload decisions automatic when preferred
These settings can help reduce external font requests, improve loading priority for important fonts, and make font behavior easier to manage.
Why Font Optimization Matters
Fonts are often loaded early in the page experience because they affect how text and icons appear.
Poorly optimized fonts can contribute to:
- Slower first render
- Text appearing late
- Text changing style after load
- Layout shift
- Extra third-party requests
- Render-blocking resources
- Missing or delayed icons
Optimizing fonts helps the browser load the most important font files sooner while avoiding unnecessary font loading.
Serve Google Fonts Locally
The Serve Google Fonts Locally setting allows MinimalCSS to serve Google Fonts from your own website instead of loading them from Google’s servers.
This can reduce external requests and give your site more control over font delivery.
When this option is enabled, MinimalCSS can identify Google Fonts used on your site and serve local copies where supported.
This may help with:
- Reducing third-party font requests
- Improving font loading consistency
- Reducing dependency on external Google Fonts requests
- Supporting privacy-conscious font loading
- Improving performance when fonts are reused across many pages
After enabling this setting, review your site to confirm that fonts still look correct across desktop and mobile.
When Serving Google Fonts Locally Is Helpful
Serving Google Fonts locally is useful for many WordPress sites, especially when the same fonts are used across the theme, page builder, headings, body text, buttons, and forms.
It can be especially helpful when:
- Your theme loads Google Fonts globally
- A page builder loads Google Fonts
- Multiple plugins request Google Fonts
- You want fewer third-party frontend requests
- You want more predictable font delivery
If your site already uses system fonts or does not load Google Fonts, this setting may have little or no visible effect.
Preload Critical Fonts
The Preload Critical Fonts setting helps the browser prioritize important font files.
Preloading tells the browser that a font is important and should be requested early in the page load process.
This can help reduce delays where the page appears but the correct font loads slightly later.
Critical fonts usually include:
- Main body text font
- Main heading font
- Important brand font
- Above-the-fold icon font
- Fonts used in navigation, buttons, or hero sections
Preloading is most useful for fonts that are needed immediately when the page first appears.
Be Careful Not to Preload Too Many Fonts
Font preloading should be selective.
Preloading too many font files can reduce the benefit because the browser may spend early loading time on fonts that are not actually critical.
For most sites, only the most important font files should be preloaded.
Avoid preloading every font variation unless they are truly needed above the fold. For example, regular and bold weights may be important, but several extra weights or styles may not need to be loaded immediately.
Scan & Optimize Fonts
The Scan & Optimize Fonts option scans your site to detect fonts being used on the frontend.
This helps MinimalCSS understand which fonts are present and gives you more control over font preload decisions.
After the scan runs, the results section may show detected fonts such as:
- Text fonts
- Heading fonts
- Body fonts
- Button fonts
- Icon fonts
- Locally hosted fonts
- Google Fonts
- Theme or plugin fonts
- Page builder fonts
The scan results help you decide whether to let MinimalCSS manage preloading automatically or manually choose specific fonts.
Font Scan Results
The scan results section shows the fonts detected by MinimalCSS.
This section is useful because not all fonts have the same purpose. Some fonts are used for readable text, while others are used for icons or decorative interface elements.
The results may separate or identify:
- Text fonts, used for headings, paragraphs, buttons, menus, and other readable content
- Icon fonts, used for icons from themes, plugins, page builders, WooCommerce, or WordPress itself
This distinction matters because icon fonts can affect visible icons, while text fonts affect how your written content appears.
Automatic Font Preloading
In automatic mode, MinimalCSS decides which fonts should be treated as important.
This is the easiest option for most users because it avoids requiring manual decisions about individual font files.
Automatic mode is recommended when:
- You are not sure which fonts are critical
- Your site has a simple font setup
- You want MinimalCSS to manage preload choices
- You prefer a safer default configuration
- You do not want to manually review every detected font
For many sites, automatic mode is the best starting point.
Manual Font Preloading
The scan results section may allow you to manually choose which fonts should be preloaded.
Manual selection is useful when you know which fonts are important for your site’s first visible screen.
For example, you may choose to preload:
- Your primary body font
- Your main heading font
- A brand font used in the hero section
- An icon font used in the header or navigation
- A font used by important above-the-fold buttons
Manual control is helpful when your theme, page builder, or plugins load several fonts, but only a few are truly critical.
Text Fonts
Text fonts are used for readable content on your site.
These may include fonts used for:
- Body copy
- Headings
- Navigation menus
- Buttons
- Forms
- Hero text
- Blog content
- Product content
- Calls to action
When reviewing text fonts, focus on the fonts that appear above the fold and are used throughout the site.
For many sites, the most important text fonts are the regular body font and the main heading font.
Icon Fonts
Icon fonts are used to display icons instead of regular letters or numbers.
Themes and plugins may use icon fonts for:
- Navigation icons
- Search icons
- Cart icons
- Social media icons
- Rating stars
- Form icons
- Slider arrows
- Menu toggles
- Page builder icons
- WooCommerce icons
Icon fonts can be important because missing or delayed icon fonts may cause icons to appear late, appear as empty boxes, or briefly display incorrectly.
The Fonts tab allows you to review detected icon fonts and decide whether they should be preloaded or left to automatic handling.
When to Preload Icon Fonts
Preloading an icon font may be useful when icons are visible immediately near the top of the page.
Good candidates may include icon fonts used for:
- Header icons
- Mobile menu icons
- Search icons
- Cart icons
- Social icons in the header
- Hero section icons
- Important call-to-action icons
If an icon font is only used lower on the page, it may not need to be preloaded.
When to Keep Font Preloading Automatic
Automatic font handling is usually the best choice when you are unsure which fonts are critical.
Keep font preloading automatic when:
- You do not know which font files are used above the fold
- The site uses several font weights or variations
- You are not sure whether a font is used for text or icons
- You want a simpler setup
- You are still testing the plugin
- The current font loading behavior looks good
You can always run the scan again and adjust preload choices later.
When to Rescan Fonts
Run Scan & Optimize Fonts again when font usage changes on your site.
This may be needed after:
- Changing theme fonts
- Changing page builder typography settings
- Adding or removing Google Fonts
- Updating your theme
- Updating a page builder
- Changing header or footer design
- Adding a new icon library
- Installing a plugin that adds frontend icons
- Redesigning important templates
- Switching from external Google Fonts to local fonts
Rescanning helps MinimalCSS work with the current font setup on your site.
Best Practice Workflow
A safe Fonts tab workflow looks like this:
- Open the Fonts tab.
- Enable Serve Google Fonts Locally if your site uses Google Fonts.
- Save your settings and review the frontend.
- Run Scan & Optimize Fonts.
- Review the detected text fonts and icon fonts.
- Keep preloading automatic at first unless you know which fonts are critical.
- Enable Preload Critical Fonts for important above-the-fold fonts.
- Manually preload only the fonts that are truly needed early.
- Test your homepage, service pages, blog posts, product pages, and mobile navigation.
- Rescan fonts after typography, theme, or plugin changes.
This approach helps improve font loading without overloading the browser with too many early font requests.
Troubleshooting
My fonts look different after enabling local Google Fonts
Clear your site cache and browser cache, then test again. If the fonts still look different, confirm that the correct font family and weights are being served locally.
Text changes style after the page loads
A critical font may be loading too late. Run the font scan and consider preloading the main text or heading font used above the fold.
Icons are missing or appear as boxes
An icon font may not be loading early enough, or it may have been affected by another optimization setting. Review detected icon fonts and consider preloading the icon font used in the header, menu, or important visible areas.
The site feels slower after preloading fonts
Too many fonts may be preloaded. Reduce manual preloads to only the most important text and icon fonts used above the fold.
A font is missing from the scan results
Confirm that the font is loaded on a public frontend page and not only in the admin area or behind a login. Then run the scan again.
I changed my theme typography
Run Scan & Optimize Fonts again so MinimalCSS can detect the current fonts.
I installed a plugin that added icons
Run the font scan again and review the icon font results. Decide whether the new icon font should be preloaded or left automatic.
Recommended Settings for Most Sites
For many brochure, service, ecommerce, and content websites, a good starting point is:
- Enable Serve Google Fonts Locally if Google Fonts are used.
- Enable Preload Critical Fonts carefully.
- Run Scan & Optimize Fonts after saving font settings.
- Keep font preload selection automatic at first.
- Manually preload only the main above-the-fold text fonts.
- Preload icon fonts only when important icons appear near the top of the page.
- Avoid preloading every font, weight, or style.
- Rescan fonts after theme, typography, page builder, or plugin changes.
The goal is to make important fonts available sooner without creating unnecessary early requests.