Title: Next.js: How to eliminate render-blocking Font Awesome fonts affecting LCP?

I’m trying to improve the performance of my Next.js website and reduce the Largest Contentful Paint (LCP).


Framework: Next.js 16 (App Router)
CSS Framework: Bootstrap 5.3

### Current setup ( layout.js)

import { Inter } from "next/font/google";
import "bootstrap/dist/css/bootstrap.min.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "./globals.css";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
});

### Problem

Lighthouse reports:

LCP: ~3.5–5.7s

Render-blocking resources:

* /webfonts/fa-solid-900.woff2
* /webfonts/fa-brands-400.woff2

These Font Awesome font files are loaded via the global CSS import and appear to delay rendering.

### LCP Element

Hero section text/image on the homepage.

### What I want to achieve

Reduce or eliminate the render-blocking impact of Font Awesome to improve LCP.

### Questions

1. What is the recommended way to use Font Awesome in Next.js without affecting LCP?
2. Is it better to:

* Avoid the full CSS import and use SVG icons instead?
* Preload specific font files?
* Load Font Awesome after hydration (client-side)?
3. Are there Next.js-specific techniques to prevent font files from blocking rendering?

Any guidance or best practice for handling icon fonts in a performance-optimized Next.js setup would be helpful.