Bolt performance

Font Loading Causing Layout Shift - FOUT or FOIT

Fonts load slowly causing text to flash or shift layout (Cumulative Layout Shift). Users see unstyled text briefly before custom font loads.

This impacts Core Web Vitals and user experience.

Error Messages You Might See

Cumulative Layout Shift > 0.25 Font blocking render for 3+ seconds Text remains invisible while custom font loads FOUT/FOIT causing layout thrashing
Cumulative Layout Shift > 0.25Font blocking render for 3+ secondsText remains invisible while custom font loadsFOUT/FOIT causing layout thrashing

Common Causes

  1. Loading fonts from CDN without preload
  2. Large font files not optimized or subsetted
  3. Font-display not set to optimal value
  4. Loading too many font variations
  5. Self-hosted fonts not configured for preload

How to Fix It

Add preload to head:

Use font-display: swap in @font-face to prevent invisible text

Subset fonts: include only characters you use

Use Next.js font optimization: import { Poppins } from 'next/font/google'

Limit to 2-3 font families max

Real developers can help you.

MFox MFox Full-stack professional senior engineer (15+years). Extensive experience in software development, qa, and IP networking. Jen Jacobsen Jen Jacobsen I’m a Full-Stack Developer with over 10 years of experience building modern web and mobile applications. I enjoy working across the full product lifecycle — turning ideas into real, well-built products that are intuitive for users and scalable for businesses. I particularly enjoy building mobile apps, modern web platforms, and solving complex technical problems in a way that keeps systems clean, reliable, and easy to maintain. Stanislav Prigodich Stanislav Prigodich 15+ years building iOS and web apps at startups and enterprise companies. I want to use that experience to help builders ship real products - when something breaks, I'm here to fix it. Dor Yaloz Dor Yaloz SW engineer with 6+ years of experience, I worked with React/Node/Python did projects with React+Capacitor.js for ios Supabase expert Anthony Akpan Anthony Akpan Developer with 8 years of experience building softwares fro startups Richard McSorley Richard McSorley Full-Stack Software Engineer with 8+ years building high-performance applications for enterprise clients. Shipped production systems at Walmart (4,000+ stores), Cigna (20M+ users), and Arkansas Blue Cross. 5 patents in retail/supply chain tech. Currently focused on AI integrations, automation tools, and TypeScript-first architectures. Taufan Taufan I’m a product-focused engineer and tech leader who builds scalable systems and turns ideas into production-ready platforms. Over the past years, I’ve worked across startups and fast-moving teams, leading backend architecture, improving system reliability, and shipping products used by thousands of users. My strength is not just writing code — but connecting product vision, technical execution, and business impact. BurnHavoc BurnHavoc Been around fixing other peoples code for 20 years. Luca Liberati Luca Liberati I work on monoliths and microservices, backends and frontends, manage K8s clusters and love to design apps architecture Caio Rodrigues Caio Rodrigues I'm a full-stack developer focused on building practical and scalable web applications. My main experience is with **React, TypeScript, and modern frontend architectures**, where I prioritize clean code, component reusability, and maintainable project structures. I have strong experience working with **dynamic forms, state management (Redux / React Hook Form), and complex data-driven interfaces**. I enjoy solving real-world problems by turning ideas into reliable software that companies can actually use in their daily operations. Beyond coding, I care about **software quality and architecture**, following best practices for componentization, code organization, and performance optimization. I'm also comfortable working across the stack when needed, integrating APIs, handling business logic, and helping transform prototypes into production-ready systems. My goal is always to deliver solutions that are **simple, efficient, and genuinely useful for the people using them.**

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help

Frequently Asked Questions

What's the best font-display value?

swap: shows system font immediately, updates when custom loads (best UX). fallback: wait 100ms then show system

Should I self-host or use CDN?

Self-host for control and speed. CDN (Google Fonts) if you want simplicity

How do I minimize font downloads?

Subset fonts to used characters, use variable fonts for multiple weights, limit to necessary fonts

Related Bolt Issues

Can't fix it yourself?
Real developers can help.

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help