Prevent Layout Shifts from Custom Icon Fonts

Custom icon fonts frequently degrade Core Web Vitals by causing Cumulative Layout Shift (CLS) when they load after the initial page render. This article explains the technical strategies web engineers use to eliminate layout shifts caused by late-loading icon fonts, including critical preloading, CSS space reservation, the proper use of the font-display property, and migrating to modern vector alternatives.

Preload Critical Icon Fonts

By default, browsers discover web fonts late in the rendering lifecycle because they wait until the HTML is parsed and the CSS Object Model (CSSOM) is constructed. To force the browser to prioritize the icon font file, engineers declare a preload tag in the <head> of the HTML document.

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

The crossorigin attribute is mandatory even when self-hosting fonts. Preloading moves the font request to the top of the network waterfall, drastically reducing the window between content rendering and icon rendering.

Enforce Fixed Dimensions with CSS

Layout shifts typically occur when an icon's parent element collapses to zero width or changes dimensions once the font glyph is rendered. Engineers prevent this by locking the icon container to strict dimensions via CSS before the font loads.

.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  contain: layout size;
}

Key CSS properties that stabilize the layout include:

  • display: inline-block or display: block: Prevents the element from collapsing horizontally.
  • Explicit width and height: Reserves the exact pixel or rem footprint of the final icon.
  • contain: size layout: Tells the browser engine that the element's internal changes will not alter the geometry of the surrounding page.

Configure the font-display Strategy

The @font-face descriptor font-display controls how a font renders relative to its download state.

  • font-display: optional: This is the most effective setting for eliminating layout shifts entirely. The browser gives the font a tiny rendering window (around 100ms). If the font is not cached or downloaded within that window, the browser falls back permanently for that session, avoiding layout reflow.
  • font-display: block: The browser hides text/glyphs using an invisible fallback until the font loads (up to 3 seconds), preventing the swap shift that occurs when switching from an unstyled glyph to an icon glyph. However, it requires explicit dimensions on the container to prevent shifting if the element was initially empty.

Hide Empty Glyphs During the Loading State

When using pseudo-elements like ::before to insert icons via Unicode private-use areas, an unstyled placeholder glyph (like an empty rectangle or missing character symbol) might appear temporarily. Engineers hide pseudo-elements until the font is verified or keep text transparent:

.icon::before {
  content: "\e001";
  visibility: hidden;
}

.fonts-loaded .icon::before {
  visibility: visible;
}

Using the CSS Font Loading API, developers set a class on the <html> or <body> element once the specific icon font resolves, ensuring content appears simultaneously without visible shifting.

Replace Icon Fonts with Inline SVGs

The most permanent solution used in modern web performance engineering is abandoning icon fonts altogether in favor of inline SVGs or SVG symbol sprites.

Because SVGs are defined directly within the DOM or rendered via standard XML definitions, they do not rely on an external font file download to compute glyph geometry. SVGs render immediately alongside the rest of the HTML, completely bypassing font-network delays, font-swapping logic, and layout shifts.