Why Your PrestaShop Theme Is Loading 15 Fonts You Don't Need

The Hidden Cost of Font Bloat in PrestaShop Themes

Open your browser's DevTools, switch to the Network tab, filter by "Font," and reload your PrestaShop store. If you see more than three or four font files downloading, you have a problem that is silently costing you customers. Most PrestaShop themes ship with a staggering number of font resources that the average store never uses, and every single one of them delays the moment your visitors can actually read your content.

Font bloat is one of the most overlooked performance issues in PrestaShop. Store owners spend hours optimizing images, enabling CCC (Combine, Compress, Cache), and tweaking server configurations, yet they ignore the fact that their theme is loading 800KB or more of font files on every single page load. This article explains exactly why this happens, how to audit your font loading, and what to do about it.

How PrestaShop Themes Bundle Fonts

PrestaShop themes are distributed as self-contained packages. When a theme developer builds a theme, they want it to work out of the box for as many stores as possible. This means they include every font variant and icon library they might conceivably need. The result is a theme that ships with far more font resources than any single store will ever use.

A typical PrestaShop theme includes three categories of fonts. First, there are display fonts used for headings, body text, and UI elements. These are usually Google Fonts like Roboto, Open Sans, Lato, or Montserrat. Second, there are icon fonts like FontAwesome, Material Icons, or theme-specific icon sets. Third, there are fallback or decorative fonts that the theme uses for specific components like banners, badges, or promotional sections.

The problem compounds because each font family typically ships in multiple weights and styles. A single font like Roboto might include Regular (400), Medium (500), Bold (700), and their italic variants, each as a separate WOFF2 file. Multiply that across two or three font families plus an icon library, and you quickly reach 12 to 15 individual font files loading on every page.

The FontAwesome Problem

FontAwesome deserves its own section because it is the single biggest font-related performance offender in PrestaShop themes. The full FontAwesome 5 library weighs approximately 150KB for the webfont file alone, plus another 60-80KB for its CSS. FontAwesome 6 is even larger. The library contains over 1,600 icons, but the average PrestaShop store uses maybe 20 to 30 of them.

That means you are forcing every visitor to download over 200KB of font and CSS data just so you can display a shopping cart icon, a search magnifying glass, and a few social media logos. This is an absurd trade-off, and it happens because theme developers find it easier to include the entire library than to subset it for each store's specific needs.

The Classic theme in PrestaShop 1.7 and 8.x includes FontAwesome 4.7, which is slightly smaller but still contains hundreds of icons you will never use. The Hummingbird theme in PrestaShop 8.x moved away from FontAwesome in favor of SVG icons, which is a significant improvement, but many third-party themes and modules still rely on FontAwesome and load their own copy on top of whatever the theme provides.

Google Fonts and the Performance Tax

Google Fonts are the most popular web font service, and PrestaShop themes make heavy use of them. However, loading Google Fonts the default way creates a chain of performance-killing requests.

When your theme loads Google Fonts via the standard link tag, the browser must first connect to fonts.googleapis.com to download the CSS file. That CSS file then tells the browser to download the actual font files from fonts.gstatic.com. Each of these connections requires DNS resolution, TCP handshake, and TLS negotiation. On mobile connections, this chain can add 300-500ms of delay before a single character of text renders on screen.

Even worse, Google Fonts CSS uses the font-display descriptor set to "swap" by default since 2019, but many older themes still reference Google Fonts CSS URLs that predate this change. Without font-display: swap, the browser may hide all text on the page until the font downloads, creating the dreaded Flash of Invisible Text (FOIT) where visitors see a blank page for one to three seconds.

There is also a privacy concern. Loading fonts from Google's CDN means Google receives information about every visitor to your store, including their IP address and the pages they visit. Under GDPR, this requires explicit consent, and a German court ruled in January 2022 that using Google Fonts without consent violates GDPR, resulting in fines.

How to Audit Your Font Loading

Before you can fix the problem, you need to understand exactly what fonts your theme is loading and which ones you actually need. Here is a systematic approach.

Open Chrome DevTools (F12), go to the Network tab, and check the "Disable cache" checkbox. Reload your page and filter by "Font" in the filter bar. You will see every font file the browser downloads. Note the file names, sizes, and the initiator column which tells you which CSS file requested each font.

Next, use the Coverage tab in DevTools (Ctrl+Shift+P, then type "Coverage"). Start a coverage recording and navigate through your store. The Coverage tab shows you exactly how much of each CSS file is actually used. For FontAwesome's CSS, you will typically see 90% or more marked as unused.

You can also use the Lighthouse audit in DevTools. Run a performance audit and look for the "Reduce unused CSS" and "Ensure text remains visible during webfont load" opportunities. Lighthouse will specifically call out font-related performance issues.

For a more thorough analysis, use WebPageTest (webpagetest.org) to run a test from a mobile connection. Look at the waterfall chart and find the font requests. Note when they start loading relative to other resources and how long they take. On a 3G connection, font loading delays become painfully obvious.

Removing Unused Fonts Step by Step

Once you know which fonts your theme loads and which ones you actually need, it is time to remove the excess. The approach differs depending on your theme's architecture.

For themes that load Google Fonts via a link tag in the header template, find the template file that contains the Google Fonts reference. In most themes, this is in templates/layout/head.tpl or a similar file. If you are using a child theme, copy this template to your child theme directory before editing. Remove or modify the Google Fonts link to include only the weights and families you actually use.

For FontAwesome, check whether your theme loads it via a CSS file in the assets/css directory or via a CDN link. If it is a local file, you have two options. You can replace the full FontAwesome package with a subset that contains only the icons you use, or you can replace icon font usage with inline SVGs entirely.

To subset FontAwesome, use a tool like IcoMoon (icomoon.io) or Fontello (fontello.com). These tools let you select only the specific icons you need and generate a custom font file that might be 5-10KB instead of 150KB. You will need to update the CSS class names if the tool generates different ones, but most allow you to keep the original FontAwesome class names.

For Google Fonts, check every CSS file in your theme for @font-face declarations. Theme developers sometimes import fonts directly in CSS rather than through the head template. Use your DevTools search (Ctrl+Shift+F) to search across all loaded resources for "@font-face" and "fonts.googleapis.com."

Implementing font-display: swap

If you keep any web fonts, make absolutely sure they use the font-display: swap descriptor. This tells the browser to immediately show text using a fallback system font while the web font downloads in the background. Once the web font is ready, the browser swaps it in. This eliminates FOIT and ensures your content is readable instantly.

For Google Fonts loaded via CDN, add the display=swap parameter to the URL. For example, change fonts.googleapis.com/css2?family=Roboto:wght@400;700 to fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap. Note that Google added this parameter by default in 2019, but many PrestaShop themes still use older URL formats.

For self-hosted fonts with @font-face declarations in your CSS, add font-display: swap to each @font-face block. Open your theme's CSS file containing the @font-face rules and add the property. It goes inside the @font-face block alongside font-family, src, and font-weight.

Be aware that font-display: swap can cause a Flash of Unstyled Text (FOUT) where text briefly appears in the fallback font before switching to the web font. This is a much better experience than invisible text, but you can minimize the visual jarring by choosing fallback fonts that closely match your web font's metrics. The CSS size-adjust, ascent-override, and descent-override properties help with this.

Self-Hosting Fonts vs CDN Loading

Self-hosting your fonts rather than loading them from Google's CDN offers several significant advantages for PrestaShop stores.

Performance improves because you eliminate the extra DNS lookup and connection to Google's servers. Your fonts load from the same domain as your other assets, which means the browser can reuse existing connections. With HTTP/2 or HTTP/3, all your font files can download simultaneously over a single connection.

Privacy compliance becomes simpler because visitor data no longer gets sent to Google. This eliminates a GDPR concern entirely, and you do not need to add Google Fonts to your cookie consent banner.

Reliability improves because you are not dependent on an external service. If Google's CDN has an issue (rare but it happens), your fonts still load.

To self-host Google Fonts, use the google-webfonts-helper tool (gwfh.mranftl.com/fonts) which provides a simple interface to download any Google Font in WOFF2 format with the correct @font-face CSS. Download only the weights and styles you need, place the files in your theme's assets/fonts directory, and add the @font-face CSS to your theme stylesheet.

The only potential disadvantage of self-hosting is that you lose the possibility of a cache hit if the visitor has already loaded the same font from Google's CDN on another site. However, browsers have largely eliminated this cross-site caching for privacy reasons since 2020, so this advantage no longer exists in practice.

Font Subsetting: The Nuclear Option

Font subsetting means removing characters you do not need from a font file. A typical Latin web font includes characters for dozens of languages, many of which your store does not use. By subsetting to only the characters your store needs, you can reduce font file sizes by 50-70%.

The tool pyftsubset from the fonttools Python library is the most reliable way to subset fonts. You can specify exactly which Unicode ranges to include. For a store that operates only in English, you might subset to Basic Latin (U+0020-007F) plus Latin-1 Supplement (U+00A0-00FF) for currency symbols and accented characters.

For stores operating in multiple languages, you need to be more careful. Include the Unicode ranges for all languages your store supports. Google Fonts CSS actually does this automatically with unicode-range descriptors, loading character subsets on demand, but self-hosted fonts need manual subsetting.

A simpler approach is to use the WOFF2 format exclusively and drop support for older formats. WOFF2 uses Brotli compression and produces files 30% smaller than WOFF. Every modern browser supports WOFF2, so unless you need to support Internet Explorer 11, there is no reason to include WOFF, TTF, or EOT formats. Many PrestaShop themes still ship with all four formats for backward compatibility that is no longer necessary.

System Font Stacks: The Zero-Cost Alternative

The most radical solution to font performance is to not use web fonts at all. Modern operating systems ship with high-quality fonts that look excellent on screen. A system font stack uses whatever font the operating system provides, which means zero font files to download and instant text rendering.

The modern system font stack looks like this: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif. This gives you San Francisco on Apple devices, Segoe UI on Windows, and Roboto on Android. All of these are clean, modern, highly readable sans-serif fonts.

GitHub, Bootstrap 5, and many high-performance websites use system font stacks. The visual difference between a system font and a Google Font like Open Sans or Roboto is minimal, especially for body text. Most of your customers will not notice or care whether your store uses Roboto loaded from a server or Roboto already installed on their Android phone.

To implement a system font stack in PrestaShop, you need to modify your theme's CSS to replace the existing font-family declarations, remove the @font-face rules and Google Fonts link tags, and delete the font files from your theme's assets directory. If you are using a child theme, you can override the parent theme's font declarations without modifying the parent theme files.

What About Icon Fonts?

If you remove FontAwesome or another icon font, you need an alternative for displaying icons. The best modern approach is inline SVG. SVG icons render crisply at any size, can be styled with CSS, and only add weight for the specific icons you use rather than loading an entire icon library.

PrestaShop's Hummingbird theme uses SVG icons natively, which is one of the reasons it performs better than Classic. If your theme uses FontAwesome, you can replace individual icons with SVGs from sources like Heroicons, Feather Icons, or even FontAwesome's own SVG files (which are available separately from the font version).

For a PrestaShop store, you typically need fewer than 30 unique icons: cart, search, user account, heart/wishlist, arrows, social media logos, and a few category-specific icons. As inline SVGs, these might total 10-15KB, compared to 150-200KB for the full FontAwesome font and CSS.

Measuring the Impact

After removing unused fonts, measure the improvement. Run Lighthouse before and after, comparing the Performance score, First Contentful Paint (FCP), and Largest Contentful Paint (LCP). Font optimization typically improves FCP by 200-500ms on mobile connections.

Check the total transfer size in DevTools Network tab. A well-optimized PrestaShop store should transfer fewer than 50KB of font data total. If you switch to system fonts, that number drops to zero.

Also verify that your store still looks correct. Check every page type: homepage, category, product, cart, and checkout. Some themes use specific fonts for specific elements, and removing a font might cause unexpected fallback rendering. Always test thoroughly before deploying font changes to production.

Summary: A Font Loading Checklist

Audit your current font loading with DevTools Network tab filtered to fonts. Identify which fonts are actually used by checking CSS coverage. Remove any Google Fonts families or weights you do not use. Replace full icon fonts with subsetted versions or inline SVGs. Add font-display: swap to all remaining @font-face declarations. Self-host your fonts instead of loading from Google's CDN. Consider WOFF2-only to eliminate older, larger formats. Evaluate whether system fonts could replace your web fonts entirely. Measure before and after with Lighthouse and WebPageTest. The goal is simple: load only what you need, load it efficiently, and never make your visitors wait for fonts they cannot see.

For more details, read our guides: Page Speed and SEO: How Slow Loading Kills Your Google Rankings and Is Your Store Slow? How to Check and What to Do About It.