What font-display value should I use?

Use font-display: swap for body text — it shows fallback text immediately. Use font-display: optional for decorative fonts. Avoid font-display: block, which hides text for up to 3 seconds.

Why should I remove EOT and SVG font formats?

EOT is only needed for IE8 and below (<0.1% market share). SVG fonts are obsolete. Removing these formats reduces CSS complexity and eliminates unnecessary HTTP requests.

Web Font Delivery Size Optimizer

Paste a CSS block containing @font-face declarations to analyze font delivery online for free. Our web font delivery size optimizer detects missing WOFF2 format, legacy EOT/SVG formats, missing font-display, GDPR issues, and generates an optimized CSS output. All analysis happens in your browser. No signup required.

Paste a CSS block containing @font-face declarations to analyze font formats, detect missing WOFF2, check font-display, and get an optimized CSS output. All analysis happens locally in your browser.

Load sample:

CSS Input (@font-face declarations)

Why Use Our Web Font Delivery Size Optimizer?

Instant Web Font Delivery Analysis

Analyze @font-face CSS declarations instantly in your browser — no server upload, no cloud processing. Our web font delivery size optimizer detects missing WOFF2, legacy formats, and font-display issues in real time.

Secure Web Font Delivery Optimizer Online

Your CSS source code never leaves your device when you analyze it. 100% client-side processing means complete privacy — no cloud storage, no server logs, no font URL exposure.

Web Font Delivery Optimizer — No Installation

Analyze and optimize @font-face declarations directly in your browser with no software downloads, no plugins, and no account required. Works on any modern browser on any operating system.

Optimized CSS Output with One Click

The optimizer generates a cleaned-up @font-face CSS block — EOT and SVG formats removed, font-display added, local() fallbacks added — ready to copy or download as a .css file.

Common Use Cases for Web Font Delivery Size Optimizer

Core Web Vitals Font Optimization

Analyze @font-face declarations to fix font-related LCP and CLS issues. Missing font-display: swap causes invisible text (FOIT) that delays LCP; the optimizer detects and fixes this automatically.

Legacy Font Stack Modernization

Modernize legacy @font-face stacks that include EOT, SVG, and TTF formats. The optimizer removes legacy formats, ensures WOFF2 is first in the src list, and generates a clean modern CSS output.

Design System Font Audit

Audit the @font-face declarations in your design system or component library. The optimizer identifies missing WOFF2, inconsistent font-display values, and opportunities to switch to variable fonts.

GDPR-Compliant Font Self-Hosting

Detect Google Fonts CDN URLs in @font-face declarations that may violate GDPR by sending user IP addresses to Google. The optimizer flags these and recommends self-hosting alternatives.

Multi-Language Font Delivery

Analyze unicode-range declarations for multi-language font stacks. The optimizer detects missing unicode-range properties that cause all font subsets to be downloaded even for single-language pages.

Variable Font Migration Planning

Identify font families with 4+ weight declarations that would benefit from switching to a variable font. The optimizer flags these and recommends the variable font approach to reduce HTTP requests.

Understanding Web Font Delivery Optimization

What is Web Font Delivery Optimization?

Web font delivery optimization is the process of configuring @font-face CSS declarations to minimize font download size, reduce HTTP requests, and prevent render-blocking. The key factors are: format selection (WOFF2 is 30–50% smaller than WOFF), font-display (prevents invisible text during font loading), unicode-range (enables per-script subsetting), and local() fallback (uses system fonts when available). Our web font delivery size optimizer parses your @font-face CSS, detects all these issues, and generates an optimized CSS output.

How Our Web Font Delivery Size Optimizer Works

1Paste your @font-face CSS: Paste any CSS containing @font-face declarations — from your stylesheet, a Google Fonts embed, or a font provider. All analysis happens locally in your browser — your CSS and font URLs never leave your device.
2Click "Analyze Font Delivery": The optimizer parses each @font-face block, extracts font-family, font-weight, font-style, font-display, unicode-range, and all src entries. It detects missing WOFF2, legacy formats (EOT, SVG), missing font-display, and GDPR issues.
3Review recommendations and download optimized CSS: The results show per-declaration format badges, optimization recommendations with fixes, and a cleaned-up CSS output — EOT/SVG removed, font-display added, local() fallbacks added — ready to copy or download.

What Gets Optimized

WOFF2 Format: WOFF2 uses Brotli compression and is 30–50% smaller than WOFF. It is supported by all modern browsers (Chrome 36+, Firefox 39+, Safari 10+, Edge 14+). Always use WOFF2 as the first src entry.
font-display Property: Controls how the browser handles font loading. swap shows fallback text immediately (best for body text); optional only uses the font if it loads within 100ms (best for non-critical fonts).
Legacy Formats (EOT, SVG):EOT is only needed for IE8 and below (<0.1% market share). SVG fonts are obsolete. Removing them reduces CSS complexity and eliminates unnecessary HTTP requests on legacy browsers.
unicode-range: Enables per-script font subsetting — the browser only downloads the font file for the scripts actually used on the page. Critical for multi-language sites with large CJK or multi-script font families.

Important Limitations

The web font delivery size optimizer analyzes CSS declarations only— it does not download or measure actual font file sizes. Estimated sizes are based on typical values for each format (WOFF2 ~18 KB, WOFF ~28 KB, TTF ~45 KB for a Latin subset). Actual sizes depend on the number of glyphs, OpenType features, and subsetting. The optimizer cannot detect whether WOFF2 files are actually available at the specified URLs — verify URLs in your browser's Network tab.

Related Tools

JSON to YAML

Convert JSON to YAML format instantly - Free online JSON to YAML converter

XML to YAML

Convert XML to YAML format for configuration migration - Free online XML to YAML converter

CSV to YAML

Convert CSV spreadsheet data to YAML format - Free online CSV to YAML converter

TSV to YAML

Convert TSV tab-separated data to YAML format - Free online TSV to YAML converter

Frequently Asked Questions About Web Font Delivery Size Optimizer

A web font delivery size optimizer analyzes @font-face CSS declarations to detect missing WOFF2 format, legacy formats (EOT, SVG), missing font-display, and other delivery issues. Our free web font delivery size optimizer online works entirely in your browser — your CSS is never uploaded to any server.

WOFF2 uses Brotli compression and is 30–50% smaller than WOFF at the same visual quality. WOFF2 is supported by all modern browsers (Chrome 36+, Firefox 39+, Safari 10+, Edge 14+). Always use WOFF2 as the first src entry in @font-face declarations, with WOFF as a fallback for IE9–IE11.

Use font-display: swap for body text — it shows fallback text immediately and swaps to the web font when it loads. Use font-display: optional for decorative or non-critical fonts — it only uses the web font if it loads within 100ms, preventing layout shifts. Avoid font-display: block, which hides text for up to 3 seconds.

Absolutely. Our web font delivery size optimizer processes everything locally in your browser. Your CSS source code and font URLs are never uploaded to any server, never stored, and never leave your device.

Yes — 100% free, forever. No signup, no account, no premium tier, no file size limits, and no ads interrupting your workflow.

EOT (Embedded OpenType) is only needed for IE8 and below, which has less than 0.1% market share. SVG fonts are obsolete and not supported by any modern browser. Removing these formats reduces CSS complexity and eliminates unnecessary HTTP requests on legacy browsers.

unicode-range tells the browser which Unicode characters a font file covers. When set correctly, the browser only downloads the font file for the scripts actually used on the page. For example, a page with only Latin text won't download the Cyrillic or CJK font subsets. This is critical for multi-language sites with large font families.

Loading fonts from Google's CDN (fonts.gstatic.com) sends user IP addresses to Google's servers, which may violate GDPR in the EU. German courts have ruled this illegal without explicit user consent. Self-hosting fonts using google-webfonts-helper or the Google Fonts Subset Downloader tool avoids this issue.

A variable font stores multiple weights, styles, and optical sizes in a single file using OpenType variation axes. A variable font for Inter (all weights 100–900) is typically 80–120 KB as WOFF2 — smaller than loading 4+ separate weight files. Use variable fonts when you need 3 or more weights of the same font family.