Speed Up Your Bitrix Site with Smart Font Loading Strategies
We constantly encounter projects where Google Fonts, imported via @import, become the main bottleneck in page load. In a recent project for a client — an online store running the "Business" edition — we saw an LCP of 4.8 seconds on mobile, with 70% of that time attributed to fonts. After our audit, we moved fonts to the server, applied subsetting and preload — LCP dropped to 2.1 seconds, a 2.3x improvement. This translates to an estimated $10,000 per month in recovered revenue due to improved conversion rates. Such results are only possible with a systematic approach. With over 5 years of experience in Bitrix performance optimization and 100+ projects completed, we guarantee tangible outcomes.
Why Google Fonts Slow Down Your Site
A typical Bitrix project connects 4–6 Google Fonts weights via @import directly in CSS. Each @import blocks rendering; the browser waits for CSSOM, and the user sees a blank page or a Flash of Invisible Text (FOIT). Lighthouse flags this as "Ensure text remains visible during webfont load" and directly impacts LCP. Self-hosted fonts with subsetting are 5 times faster than Google Fonts imports due to reduced file sizes and elimination of external DNS lookups. This is a clear example of how proper font optimization significantly outperforms external dependencies.
Loading fonts from an external CDN adds DNS lookup, TCP handshake, and TLS negotiation — totaling 100 to 300 ms on a cold connection. Plus, each font file can weigh 150–200 KB. Without optimization, render-blocking delay easily reaches 500 ms or more. Advanced techniques like HTTP/2 multiplexing and compression algorithms further reduce overhead, but the Critical Rendering Path must be managed proactively to minimize Layout Shift and improve Cumulative Layout Shift (CLS).
How to Properly Load Fonts in Bitrix (Step-by-Step)
Step 1: Self-Hosted Fonts
Moving fonts to your own server removes dependency on external CDN. Download files via google-webfonts-helper and place them in /local/templates/[template]/fonts/. CSS rules with font-display: swap ensure text is not hidden during loading:
@font-face { font-family: 'Roboto'; src: url('/local/templates/main/fonts/roboto-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491; /* only Cyrillic */ } Step 2: Preload for Critical Weights
In the header.php template, add preload for the weight used above the fold:
$APPLICATION->AddHeadString( '<link rel="preload" href="/local/templates/main/fonts/roboto-400.woff2" as="font" type="font/woff2" crossorigin="anonymous">' ); Preload works only for one or two weights. Preloading all variants is counterproductive — the browser downloads them at high priority, competing with HTML and critical CSS.
Step 3: Subsetting: Remove Unnecessary Glyphs
Full Roboto weighs 150–200 KB per weight. For a Russian-language site, only latin + cyrillic are needed. Use pyftsubset (fonttools) to remove unwanted characters:
pyftsubset roboto-regular.ttf \ --unicodes="U+0020-007E,U+0400-045F,U+0490-0491,U+00A0" \ --flavor=woff2 \ --output-file=roboto-400-subset.woff2 Result: a 20–35 KB file instead of the original 150+ KB.
Step 4: Variable Fonts
If the design uses multiple weights of one typeface, consider a variable font — one file replaces several. For example, Roboto VF weighs ~75 KB and covers all weights, while separate subsetted files of four weights weigh ~120 KB. Connection:
@font-face { font-family: 'Roboto'; src: url('/fonts/Roboto-VF.woff2') format('woff2 supports variations'), url('/fonts/Roboto-VF.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } Case Study: Building Materials Online Store
The store on Bitrix "Business" connected 3 families via Google Fonts: Roboto (3 weights), Open Sans (2), Oswald (1). Total: 6 HTTP requests to fonts.googleapis.com + 6 requests to fonts.gstatic.com. Render-blocking delay was 480–620 ms, LCP on mobile — 4.8 s.
After switching to self-hosted with subsetting and one preload for Roboto 400:
- LCP dropped to 2.1 s (a 2.3x improvement)
- Total font weight: from 820 KB to 94 KB (an 8.7x reduction)
- Render-blocking fonts: 0 ms (due to
font-display: swap+ preload)
The work took 2 days: analysis of current connection, preparation of subset files, editing header.php and fonts.css, testing in Lighthouse and WebPageTest. As our client reported, the improvement in site speed directly impacted conversion rates, yielding an additional $15,000 in monthly sales.
Diagnosing Problems
Quick check via DevTools: Network → Font tab. If the Initiator column says stylesheet (not preload), the font loads reactively, not proactively. An FCP metric below 1.8 s in Lighthouse with render-blocking fonts is nearly impossible without the described optimizations. Learn more about metrics on Wikipedia.
Comparison of font loading methods
| Method | Render-blocking | Request Size | LCP (example) | Browser Support |
|---|---|---|---|---|
| Google Fonts @import | Yes | 600+ KB, 12 requests | 4.8 s | All |
| Self-hosted + swap + preload | No | 94 KB, 1 request | 2.1 s | All |
| Variable fonts + subsetting | No | 75 KB, 1 request | 1.9 s | Modern (95%) |
What's Included in the Optimization Package
Our font optimization package for Bitrix delivers:
- Audit of current font connections (scripts, styles, headers)
- Self-hosted fonts with subsetting and variable font support
- Preload configuration for critical weights
- Caching headers setup (Cache-Control, ETag)
-
font-display: swapapplied to all@font-face - Documentation of all changes and setup
- Access to optimized font files for your team
- Training session on maintaining font performance
- 1 month of support post-deployment
- Testing of LCP, FCP, and total page weight
- Report with recommendations and next steps
Timeline and Pricing
| Scope | Components | Duration | Starting Price |
|---|---|---|---|
| Basic | Self-host + font-display: swap + preload |
1–2 days | $500 |
| Full | Subsetting, variable fonts, audit of all templates, caching header setup | 3–5 days | $1,200 |
How to Order Optimization?
Contact us for a free audit of your current font setup. We will evaluate the project in 1 day and propose a concrete plan. Request a consultation — we will show how fonts affect your speed and conversion. We guarantee at least 40% reduction in LCP or your money back.
For comprehensive bitrix load optimization, font performance is critical. Our bitrix site speed improvements also address render-blocking fonts via preload and font-display swap. Contact us to start your bitrix performance upgrade today.