Otimização de Fontes

Q: Como uso uma fonte do Google com Tailwind CSS?

Use a opção variable para criar uma propriedade customizada CSS, depois referencie-a em tailwind.config.ts: Aplique inter.variable como uma classe em .

Q: Qual a diferença entre className e variable em um objeto de fonte?

className aplica a fonte diretamente através de uma classe CSS com uma regra font-family. variable define uma propriedade customizada CSS (ex: --font-sans) que você pode referenciar em CSS ou na configuração do Tailwind. Use variable ao integrar com o Tailwind.

Q: Armadilha: Minha fonte não está sendo aplicada mesmo tendo importado. O que está errado?

Provavelmente você esqueceu de adicionar inter.className ou inter.variable como uma classe a um elemento pai (ex: ou ). A fonte não ativa sem que a classe seja aplicada ao DOM.

Q: Armadilha: Especifiquei pesos para uma fonte variável e agora meu bundle está maior. Por quê?

Passar valores explícitos de weight para uma fonte que suporta pesos variáveis faz com que o Next.js baixe arquivos de fonte estáticos separados em vez de um único arquivo de fonte variável. Omita a opção weight para obter a única fonte variável.

Q: Posso usar next/font dentro de um Client Component?

Não. As funções next/font (Inter(), localFont()) só podem ser chamadas em Server Components. Defina as fontes em layout.tsx ou em um arquivo fonts.ts dedicado (sem "use client") e aplique as classes através do DOM.

Q: O que display: "swap" versus display: "optional" faz?

"swap": mostra uma fonte de fallback imediatamente, depois troca para a fonte customizada quando carregada. Garante que a fonte customizada apareça eventualmente. "optional": o navegador pode pular completamente a fonte customizada se ela não carregar dentro de ~100ms. Pode causar texto invisível ou ausente.

Q: Como tipar o array src para localFont em TypeScript?

Cada entrada é um objeto com path (string), weight (string) e opcionalmente style (string):

Auto-hospede e otimize fontes da web com next/font -- zero mudança de layout, sem requisições de rede externas, subsetting automático.

Receita

Cartão de receita de referência rápida -- pronto para copiar e colar.

// app/layout.tsx
import { Inter } from "next/font/google";
 
const inter = Inter({
  subsets: ["latin"],
  display: "swap",
});
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

// Fonte variável com variável CSS
const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});
 
// Use no Tailwind CSS
<html className={inter.variable}>
// tailwind.config.ts: fontFamily: { sans: ["var(--font-inter)"] }

Quando usar isso: Todo projeto Next.js que usa fontes customizadas. next/font elimina FOUT (flash de texto não estilizado), auto-hospeda os arquivos de fonte e requer zero requisições de rede externas.

Exemplo de Trabalho

// app/layout.tsx -- múltiplas fontes com variáveis CSS
import { Inter, JetBrains_Mono } from "next/font/google";
 
const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
  display: "swap",
});
 
const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-mono",
  display: "swap",
});
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`}>
      <body className="font-sans antialiased">{children}</body>
    </html>
  );
}

// tailwind.config.ts
import type { Config } from "tailwindcss";
 
const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
        mono: ["var(--font-mono)", "Menlo", "monospace"],
      },
    },
  },
};
 
export default config;

// app/components/code-block.tsx
export function CodeBlock({ code }: { code: string }) {
  return (
    <pre className="font-mono bg-gray-900 text-green-400 p-4 rounded overflow-x-auto">
      <code>{code}</code>
    </pre>
  );
}

// Usando uma fonte customizada local
// app/fonts.ts
import localFont from "next/font/local";
 
export const calSans = localFont({
  src: [
    {
      path: "../public/fonts/CalSans-Regular.woff2",
      weight: "400",
      style: "normal",
    },
    {
      path: "../public/fonts/CalSans-Bold.woff2",
      weight: "700",
      style: "normal",
    },
  ],
  variable: "--font-cal",
  display: "swap",
});

// app/layout.tsx -- combinando fontes do Google e locais
import { Inter } from "next/font/google";
import { calSans } from "./fonts";
 
const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${inter.variable} ${calSans.variable}`}>
      <body className="font-sans">
        {children}
      </body>
    </html>
  );
}

O que isso demonstra:

Carregamento de múltiplas fontes do Google com variáveis CSS
Integração de variáveis de fonte com Tailwind CSS
Carregamento de uma fonte customizada local com múltiplos pesos
Combinação de fontes do Google e locais no mesmo layout
display: "swap" para carregamento acessível de fontes

Análise Detalhada

Como Funciona

next/font baixa os arquivos de fonte em tempo de build e os auto-hospeda junto com seus assets estáticos. Nenhuma requisição ao Google Fonts (ou qualquer CDN externa) é feita pelo navegador em tempo de execução.
Os arquivos de fonte são servidos com Cache-Control: public, immutable, max-age=31536000 para otimização de cache.
next/font gera automaticamente declarações @font-face com os valores corretos de font-display, unicode-range e src.
Ao usar a opção variable, uma propriedade customizada CSS (ex: --font-sans) é definida no elemento onde você aplica a classe. Isso se integra perfeitamente com a configuração fontFamily do Tailwind CSS.
A opção subsets restringe quais intervalos de caracteres são incluídos, reduzindo o tamanho do arquivo. Para idiomas com script latino, ["latin"] geralmente é suficiente.
Fontes variáveis incluem todos os pesos e estilos em um único arquivo, reduzindo o número de requisições de rede em comparação com arquivos de fonte estáticos.

Variações

Pesos de fonte específicos (fontes não variáveis):

import { Roboto } from "next/font/google";
 
const roboto = Roboto({
  weight: ["400", "500", "700"],
  subsets: ["latin"],
  display: "swap",
});

Fonte com múltiplos subsets:

const notoSans = Noto_Sans({
  subsets: ["latin", "latin-ext", "cyrillic"],
  display: "swap",
});

Pré-carregamento de uma fonte específica:

// next/font pré-carrega automaticamente as fontes usadas no layout raiz.
// Para fontes usadas apenas em páginas específicas, importe-as no layout dessa página.
 
// app/blog/layout.tsx
import { Merriweather } from "next/font/google";
 
const merriweather = Merriweather({
  weight: ["400", "700"],
  subsets: ["latin"],
  variable: "--font-serif",
});
 
export default function BlogLayout({ children }: { children: React.ReactNode }) {
  return <div className={merriweather.variable}>{children}</div>;
}

Métricas de fonte de fallback (ajuste de tamanho):

// next/font calcula automaticamente size-adjust, ascent-override,
// descent-override e line-gap-override para a fonte de fallback para
// minimizar CLS. Nenhuma configuração manual é necessária.
 
const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  adjustFontFallback: true, // padrão -- gera métricas de fallback correspondentes
});

Notas de TypeScript

import type { NextFont } from "next/dist/compiled/@next/font";
 
// Funções next/font retornam um objeto NextFont
const inter: NextFont = Inter({ subsets: ["latin"] });
 
// Propriedades chave
inter.className;  // string -- classe CSS que aplica a fonte
inter.variable;   // string | undefined -- classe de variável CSS (se a opção variable for usada)
inter.style;      // { fontFamily: string; fontWeight?: number; fontStyle?: string }
 
// Tipo de fonte local
import localFont from "next/font/local";
 
const myFont = localFont({
  src: [
    { path: "./font-regular.woff2", weight: "400", style: "normal" },
    { path: "./font-bold.woff2", weight: "700", style: "normal" },
    { path: "./font-italic.woff2", weight: "400", style: "italic" },
  ],
});

Armadilhas

Fonte não aplicada -- Esquecer de adicionar a classe className ou variable a um elemento pai significa que a fonte nunca é ativada. Correção: Aplique inter.className (ou inter.variable) a <html>, <body>, ou o contêiner relevante.
Fontes variáveis com pesos explícitos -- Algumas fontes do Google estão disponíveis como fontes variáveis, mas você passa pesos específicos de qualquer maneira, fazendo com que o Next.js baixe arquivos de fonte estáticos em vez disso. Correção: Omita a opção weight para fontes variáveis para obter o único arquivo de fonte variável.
Múltiplos subsets aumentam o tamanho do bundle -- Cada subset adiciona ao tamanho do arquivo da fonte. Correção: Inclua apenas os subsets que seu conteúdo realmente usa.
display: "optional" pode causar texto invisível -- Com font-display: optional, o navegador pode pular completamente a fonte customizada se ela não carregar rápido o suficiente (dentro de ~100ms). Correção: Use display: "swap" na maioria dos casos para garantir que a fonte customizada eventualmente apareça.
Flicker de fonte na navegação do cliente -- Se uma fonte for carregada em um layout específico da página (não no layout raiz), ela pode piscar durante a navegação do lado do cliente para essa página. Correção: Carregue fontes frequentemente usadas no layout raiz para que elas estejam sempre disponíveis.
next/font só funciona em Server Components -- Você não pode chamar Inter() ou localFont() dentro de um arquivo "use client". Correção: Defina as fontes em um Server Component (como layout.tsx ou um arquivo fonts.ts dedicado) e aplique as classes através do DOM.

Alternativas

Alternativa	Use Quando	Não Use Quando
`next/font/google`	Você quer fontes do Google auto-hospedadas com zero configuração	Você usa uma fonte proprietária que não está no Google Fonts
`next/font/local`	Você tem arquivos de fonte customizados (woff2, ttf, otf)	A fonte está disponível no Google Fonts
Google Fonts CDN (`<link>`)	Nunca no Next.js -- `next/font` é estritamente melhor	--
Pilha de fontes do sistema	Você quer performance máxima com zero downloads de fonte	Diretrizes de marca exigem uma tipografia específica
Fontsource (pacotes npm)	Você quer pacotes de fonte gerenciados por npm fora do Next.js	`next/font` já lida com auto-hospedagem

FAQs

O que o next/font faz e por que devo usá-lo?

Baixa arquivos de fonte em tempo de build e os auto-hospeda como assets estáticos.
Elimina requisições externas ao Google Fonts em tempo de execução.
Previne mudança de layout (CLS) com ajuste automático de métricas de fonte de fallback.
Gera automaticamente declarações @font-face.

Como uso uma fonte do Google com Tailwind CSS?

Use a opção variable para criar uma propriedade customizada CSS, depois referencie-a em tailwind.config.ts:

const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
// tailwind.config.ts
fontFamily: { sans: ["var(--font-sans)", "system-ui"] }

Aplique inter.variable como uma classe em <html>.

Como carrego uma fonte customizada local?

import localFont from "next/font/local";
 
const myFont = localFont({
  src: [
    { path: "./font-regular.woff2", weight: "400" },
    { path: "./font-bold.woff2", weight: "700" },
  ],
  variable: "--font-custom",
});

Qual a diferença entre className e variable em um objeto de fonte?

className aplica a fonte diretamente através de uma classe CSS com uma regra font-family.
variable define uma propriedade customizada CSS (ex: --font-sans) que você pode referenciar em CSS ou na configuração do Tailwind. Use variable ao integrar com o Tailwind.

Armadilha: Minha fonte não está sendo aplicada mesmo tendo importado. O que está errado?

Provavelmente você esqueceu de adicionar inter.className ou inter.variable como uma classe a um elemento pai (ex: <html> ou <body>). A fonte não ativa sem que a classe seja aplicada ao DOM.

Armadilha: Especifiquei pesos para uma fonte variável e agora meu bundle está maior. Por quê?

Passar valores explícitos de weight para uma fonte que suporta pesos variáveis faz com que o Next.js baixe arquivos de fonte estáticos separados em vez de um único arquivo de fonte variável. Omita a opção weight para obter a única fonte variável.

Posso usar next/font dentro de um Client Component?

Não. As funções next/font (Inter(), localFont()) só podem ser chamadas em Server Components. Defina as fontes em layout.tsx ou em um arquivo fonts.ts dedicado (sem "use client") e aplique as classes através do DOM.

O que display: "swap" versus display: "optional" faz?

"swap": mostra uma fonte de fallback imediatamente, depois troca para a fonte customizada quando carregada. Garante que a fonte customizada apareça eventualmente.
"optional": o navegador pode pular completamente a fonte customizada se ela não carregar dentro de ~100ms. Pode causar texto invisível ou ausente.

Como escopo uma fonte para uma seção específica do app?

Importe a fonte em um layout aninhado em vez do layout raiz:

// app/blog/layout.tsx
import { Merriweather } from "next/font/google";
const merriweather = Merriweather({ weight: ["400"], subsets: ["latin"], variable: "--font-serif" });
 
export default function BlogLayout({ children }) {
  return <div className={merriweather.variable}>{children}</div>;
}

Qual é o tipo TypeScript retornado pelas funções next/font?

import type { NextFont } from "next/dist/compiled/@next/font";
 
const inter: NextFont = Inter({ subsets: ["latin"] });
// Propriedades: inter.className, inter.variable, inter.style

Como tipar o array src para localFont em TypeScript?

Cada entrada é um objeto com path (string), weight (string) e opcionalmente style (string):

const myFont = localFont({
  src: [
    { path: "./font-regular.woff2", weight: "400", style: "normal" },
    { path: "./font-italic.woff2", weight: "400", style: "italic" },
  ],
});

O next/font afeta a performance se eu carregar muitas fontes?

Cada subset e arquivo de fonte adiciona à saída do build. Inclua apenas os subsets que seu conteúdo usa e limite o número de famílias de fontes ao que seu design requer.

Relacionado

Otimização de Imagens -- Otimizando imagens junto com fontes
Server Components -- Onde a configuração de fontes vive
Estático vs Dinâmico -- Fontes são parte do shell estático
Padrões de Composição -- Aplicando classes de fonte em layouts

Receita

Cartão de receita de referência rápida -- pronto para copiar e colar.

// app/layout.tsx
import { Inter } from "next/font/google";
 
const inter = Inter({
  subsets: ["latin"],
  display: "swap",
});
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

// Fonte variável com variável CSS
const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});
 
// Use no Tailwind CSS
<html className={inter.variable}>
// tailwind.config.ts: fontFamily: { sans: ["var(--font-inter)"] }

Exemplo de Trabalho

// app/layout.tsx -- múltiplas fontes com variáveis CSS
import { Inter, JetBrains_Mono } from "next/font/google";
 
const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
  display: "swap",
});
 
const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-mono",
  display: "swap",
});
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`}>
      <body className="font-sans antialiased">{children}</body>
    </html>
  );
}

// tailwind.config.ts
import type { Config } from "tailwindcss";
 
const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
        mono: ["var(--font-mono)", "Menlo", "monospace"],
      },
    },
  },
};
 
export default config;

// app/components/code-block.tsx
export function CodeBlock({ code }: { code: string }) {
  return (
    <pre className="font-mono bg-gray-900 text-green-400 p-4 rounded overflow-x-auto">
      <code>{code}</code>
    </pre>
  );
}

// Usando uma fonte customizada local
// app/fonts.ts
import localFont from "next/font/local";
 
export const calSans = localFont({
  src: [
    {
      path: "../public/fonts/CalSans-Regular.woff2",
      weight: "400",
      style: "normal",
    },
    {
      path: "../public/fonts/CalSans-Bold.woff2",
      weight: "700",
      style: "normal",
    },
  ],
  variable: "--font-cal",
  display: "swap",
});

// app/layout.tsx -- combinando fontes do Google e locais
import { Inter } from "next/font/google";
import { calSans } from "./fonts";
 
const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${inter.variable} ${calSans.variable}`}>
      <body className="font-sans">
        {children}
      </body>
    </html>
  );
}

O que isso demonstra:

Carregamento de múltiplas fontes do Google com variáveis CSS
Integração de variáveis de fonte com Tailwind CSS
Carregamento de uma fonte customizada local com múltiplos pesos
Combinação de fontes do Google e locais no mesmo layout
display: "swap" para carregamento acessível de fontes

Análise Detalhada

Como Funciona

next/font baixa os arquivos de fonte em tempo de build e os auto-hospeda junto com seus assets estáticos. Nenhuma requisição ao Google Fonts (ou qualquer CDN externa) é feita pelo navegador em tempo de execução.
Os arquivos de fonte são servidos com Cache-Control: public, immutable, max-age=31536000 para otimização de cache.
next/font gera automaticamente declarações @font-face com os valores corretos de font-display, unicode-range e src.
Ao usar a opção variable, uma propriedade customizada CSS (ex: --font-sans) é definida no elemento onde você aplica a classe. Isso se integra perfeitamente com a configuração fontFamily do Tailwind CSS.
A opção subsets restringe quais intervalos de caracteres são incluídos, reduzindo o tamanho do arquivo. Para idiomas com script latino, ["latin"] geralmente é suficiente.
Fontes variáveis incluem todos os pesos e estilos em um único arquivo, reduzindo o número de requisições de rede em comparação com arquivos de fonte estáticos.

Variações

Pesos de fonte específicos (fontes não variáveis):

import { Roboto } from "next/font/google";
 
const roboto = Roboto({
  weight: ["400", "500", "700"],
  subsets: ["latin"],
  display: "swap",
});

Fonte com múltiplos subsets:

const notoSans = Noto_Sans({
  subsets: ["latin", "latin-ext", "cyrillic"],
  display: "swap",
});

Pré-carregamento de uma fonte específica:

// next/font pré-carrega automaticamente as fontes usadas no layout raiz.
// Para fontes usadas apenas em páginas específicas, importe-as no layout dessa página.
 
// app/blog/layout.tsx
import { Merriweather } from "next/font/google";
 
const merriweather = Merriweather({
  weight: ["400", "700"],
  subsets: ["latin"],
  variable: "--font-serif",
});
 
export default function BlogLayout({ children }: { children: React.ReactNode }) {
  return <div className={merriweather.variable}>{children}</div>;
}

Métricas de fonte de fallback (ajuste de tamanho):

// next/font calcula automaticamente size-adjust, ascent-override,
// descent-override e line-gap-override para a fonte de fallback para
// minimizar CLS. Nenhuma configuração manual é necessária.
 
const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  adjustFontFallback: true, // padrão -- gera métricas de fallback correspondentes
});

Notas de TypeScript

import type { NextFont } from "next/dist/compiled/@next/font";
 
// Funções next/font retornam um objeto NextFont
const inter: NextFont = Inter({ subsets: ["latin"] });
 
// Propriedades chave
inter.className;  // string -- classe CSS que aplica a fonte
inter.variable;   // string | undefined -- classe de variável CSS (se a opção variable for usada)
inter.style;      // { fontFamily: string; fontWeight?: number; fontStyle?: string }
 
// Tipo de fonte local
import localFont from "next/font/local";
 
const myFont = localFont({
  src: [
    { path: "./font-regular.woff2", weight: "400", style: "normal" },
    { path: "./font-bold.woff2", weight: "700", style: "normal" },
    { path: "./font-italic.woff2", weight: "400", style: "italic" },
  ],
});

Armadilhas

Fonte não aplicada -- Esquecer de adicionar a classe className ou variable a um elemento pai significa que a fonte nunca é ativada. Correção: Aplique inter.className (ou inter.variable) a <html>, <body>, ou o contêiner relevante.
Fontes variáveis com pesos explícitos -- Algumas fontes do Google estão disponíveis como fontes variáveis, mas você passa pesos específicos de qualquer maneira, fazendo com que o Next.js baixe arquivos de fonte estáticos em vez disso. Correção: Omita a opção weight para fontes variáveis para obter o único arquivo de fonte variável.
Múltiplos subsets aumentam o tamanho do bundle -- Cada subset adiciona ao tamanho do arquivo da fonte. Correção: Inclua apenas os subsets que seu conteúdo realmente usa.
display: "optional" pode causar texto invisível -- Com font-display: optional, o navegador pode pular completamente a fonte customizada se ela não carregar rápido o suficiente (dentro de ~100ms). Correção: Use display: "swap" na maioria dos casos para garantir que a fonte customizada eventualmente apareça.
Flicker de fonte na navegação do cliente -- Se uma fonte for carregada em um layout específico da página (não no layout raiz), ela pode piscar durante a navegação do lado do cliente para essa página. Correção: Carregue fontes frequentemente usadas no layout raiz para que elas estejam sempre disponíveis.
next/font só funciona em Server Components -- Você não pode chamar Inter() ou localFont() dentro de um arquivo "use client". Correção: Defina as fontes em um Server Component (como layout.tsx ou um arquivo fonts.ts dedicado) e aplique as classes através do DOM.

Alternativas

Alternativa	Use Quando	Não Use Quando
`next/font/google`	Você quer fontes do Google auto-hospedadas com zero configuração	Você usa uma fonte proprietária que não está no Google Fonts
`next/font/local`	Você tem arquivos de fonte customizados (woff2, ttf, otf)	A fonte está disponível no Google Fonts
Google Fonts CDN (`<link>`)	Nunca no Next.js -- `next/font` é estritamente melhor	--
Pilha de fontes do sistema	Você quer performance máxima com zero downloads de fonte	Diretrizes de marca exigem uma tipografia específica
Fontsource (pacotes npm)	Você quer pacotes de fonte gerenciados por npm fora do Next.js	`next/font` já lida com auto-hospedagem

FAQs

O que o next/font faz e por que devo usá-lo?

Baixa arquivos de fonte em tempo de build e os auto-hospeda como assets estáticos.
Elimina requisições externas ao Google Fonts em tempo de execução.
Previne mudança de layout (CLS) com ajuste automático de métricas de fonte de fallback.
Gera automaticamente declarações @font-face.

Como uso uma fonte do Google com Tailwind CSS?

Use a opção variable para criar uma propriedade customizada CSS, depois referencie-a em tailwind.config.ts:

const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
// tailwind.config.ts
fontFamily: { sans: ["var(--font-sans)", "system-ui"] }

Aplique inter.variable como uma classe em <html>.

Como carrego uma fonte customizada local?

import localFont from "next/font/local";
 
const myFont = localFont({
  src: [
    { path: "./font-regular.woff2", weight: "400" },
    { path: "./font-bold.woff2", weight: "700" },
  ],
  variable: "--font-custom",
});

Qual a diferença entre className e variable em um objeto de fonte?

className aplica a fonte diretamente através de uma classe CSS com uma regra font-family.
variable define uma propriedade customizada CSS (ex: --font-sans) que você pode referenciar em CSS ou na configuração do Tailwind. Use variable ao integrar com o Tailwind.

Armadilha: Minha fonte não está sendo aplicada mesmo tendo importado. O que está errado?

Provavelmente você esqueceu de adicionar inter.className ou inter.variable como uma classe a um elemento pai (ex: <html> ou <body>). A fonte não ativa sem que a classe seja aplicada ao DOM.

Armadilha: Especifiquei pesos para uma fonte variável e agora meu bundle está maior. Por quê?

Posso usar next/font dentro de um Client Component?

O que display: "swap" versus display: "optional" faz?

"swap": mostra uma fonte de fallback imediatamente, depois troca para a fonte customizada quando carregada. Garante que a fonte customizada apareça eventualmente.
"optional": o navegador pode pular completamente a fonte customizada se ela não carregar dentro de ~100ms. Pode causar texto invisível ou ausente.

Como escopo uma fonte para uma seção específica do app?

Importe a fonte em um layout aninhado em vez do layout raiz:

// app/blog/layout.tsx
import { Merriweather } from "next/font/google";
const merriweather = Merriweather({ weight: ["400"], subsets: ["latin"], variable: "--font-serif" });
 
export default function BlogLayout({ children }) {
  return <div className={merriweather.variable}>{children}</div>;
}

Qual é o tipo TypeScript retornado pelas funções next/font?

import type { NextFont } from "next/dist/compiled/@next/font";
 
const inter: NextFont = Inter({ subsets: ["latin"] });
// Propriedades: inter.className, inter.variable, inter.style

Como tipar o array src para localFont em TypeScript?

Cada entrada é um objeto com path (string), weight (string) e opcionalmente style (string):

const myFont = localFont({
  src: [
    { path: "./font-regular.woff2", weight: "400", style: "normal" },
    { path: "./font-italic.woff2", weight: "400", style: "italic" },
  ],
});

O next/font afeta a performance se eu carregar muitas fontes?

Cada subset e arquivo de fonte adiciona à saída do build. Inclua apenas os subsets que seu conteúdo usa e limite o número de famílias de fontes ao que seu design requer.

Relacionado

Otimização de Imagens -- Otimizando imagens junto com fontes
Server Components -- Onde a configuração de fontes vive
Estático vs Dinâmico -- Fontes são parte do shell estático
Padrões de Composição -- Aplicando classes de fonte em layouts

Otimização de Fontes

Buscar na documentação

Otimização de Fontes