Skip to content
pageflare

Font Processors

Fonts affect both perceived performance and visual stability. Late-loading fonts cause invisible text (FOIT — Flash of Invisible Text) or layout-shifting text (FOUT — Flash of Unstyled Text). Third-party font services add DNS lookup and connection overhead. pageflare addresses all of these with four targeted processors.

Font preloading

Section titled “Font preloading”

The font preloading processor scans HTML files (using the dependency data from the asset graph) to identify which web fonts are referenced in stylesheets linked on that page. For fonts deemed critical — those used by text in the initial viewport — it injects <link rel="preload"> hints in the <head>:

<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>

The crossorigin attribute is required even for same-origin fonts because fonts are fetched in a CORS-like mode. Omitting it causes the browser to make two requests instead of one.

Preloading tells the browser to start downloading the font file as early as possible — before it has parsed the CSS that references it. For fonts used in above-the-fold text, this can shave hundreds of milliseconds off the time to render visible text.

Font-display swap

Section titled “Font-display swap”

The font-display CSS descriptor controls how a browser handles the period between when a font is requested and when it finishes downloading. The default browser behavior (auto) typically blocks text rendering for up to 3 seconds — this is FOIT.

The font-display processor:

  1. Parses every CSS file (and inline <style> blocks in HTML) for @font-face declarations.
  2. Adds font-display: swap to any @font-face that does not already have a font-display descriptor.

font-display: swap causes the browser to immediately render text using a fallback font, then swap in the web font once it loads. This eliminates invisible text at the cost of a brief visual reflow when the font arrives — a trade-off that is almost always worth it for Core Web Vitals.

Google Fonts self-hosting PRO

Section titled “Google Fonts self-hosting ”

Serving fonts from fonts.googleapis.com incurs:

  • A DNS lookup for fonts.googleapis.com.
  • A connection to fonts.googleapis.com (TLS handshake).
  • A redirect to fonts.gstatic.com.
  • A DNS lookup for fonts.gstatic.com.
  • A connection to fonts.gstatic.com (TLS handshake).
  • The actual font file download.

Even with HTTP/2, this is 2 connection round trips to external hosts before any font bytes arrive. Self-hosting eliminates all of it.

The self-hosting processor:

  1. Detects <link href="https://fonts.googleapis.com/css2?..."> tags in HTML.
  2. Fetches the Google Fonts CSS response (using the same query string) with a modern browser user-agent to receive WOFF2 URLs.
  3. Downloads each referenced WOFF2 file.
  4. Writes the font files into the output directory under /fonts/.
  5. Rewrites the @font-face declarations to point to the local paths.
  6. Replaces the Google Fonts <link> tag with an inline <style> containing the rewritten declarations.

The downloaded fonts are cached between runs. Subsequent pageflare runs only re-download fonts if the Google Fonts URL changes.

Unicode-range subsetting PRO

Section titled “Unicode-range subsetting ”

Web fonts often cover hundreds of languages. A Latin-script site using a font that covers CJK, Cyrillic, Arabic, and Latin script will download far more glyph data than necessary.

The unicode-range descriptor in @font-face tells the browser to only download the font file if the page contains characters in that range. Google Fonts uses this extensively — its CSS responses include separate @font-face blocks for Latin, Latin Extended, Greek, Cyrillic, and so on, each with a unicode-range that limits when the font file is fetched.

The unicode-range processor adds these subset descriptors to self-hosted @font-face declarations that lack them:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

This processor works in tandem with the self-hosting processor. When self-hosting fetches the Google Fonts CSS, the response already contains per-subset @font-face blocks with unicode-range values. These are preserved as-is. For fonts that are already self-hosted without subset splits, the processor infers appropriate unicode-range values based on the font metadata.

Section titled “Related concepts”
  • HTML processors — resource hints that preconnect to font origins
  • Asset graph — CSS→HTML dependency tracking used to identify which fonts appear on which pages
  • Processors — how font processors are ordered and gated by tier