Optimización de fuentes

next/font optimizará automáticamente tus fuentes (incluyendo fuentes personalizadas) y eliminará las solicitudes de red externas para mejorar la privacidad y el rendimiento.

🎥 Mira: Aprende más sobre cómo usar next/font → YouTube (6 minutos).

next/font incluye alojamiento automático integrado para cualquier archivo de fuente. Esto significa que puedes cargar fuentes web de manera óptima sin cambios de diseño, gracias a la propiedad CSS subyacente size-adjust.

Este nuevo sistema de fuentes también te permite usar convenientemente todas las fuentes de Google con rendimiento y privacidad en mente. Los archivos CSS y de fuentes se descargan en tiempo de compilación y se alojan junto con el resto de tus recursos estáticos. El navegador no envía solicitudes a Google.

Fuentes de Google

Aloja automáticamente cualquier fuente de Google. Las fuentes se incluyen en el despliegue y se sirven desde el mismo dominio que tu implementación. El navegador no envía solicitudes a Google.

Comienza importando la fuente que deseas usar desde next/font/google como una función. Recomendamos usar fuentes variables para el mejor rendimiento y flexibilidad.

import { Inter } from 'next/font/google'

// Si cargas una fuente variable, no necesitas especificar el peso
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>
  )
}

import { Inter } from 'next/font/google'

// Si cargas una fuente variable, no necesitas especificar el peso
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

Si no puedes usar una fuente variable, necesitarás especificar un peso:

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

Puedes especificar múltiples pesos y/o estilos usando un array:

app/layout.js

const roboto = Roboto({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
})

Nota importante: Usa un guión bajo (_) para nombres de fuente con múltiples palabras. Ejemplo: Roboto Mono debe importarse como Roboto_Mono.

Especificar un subconjunto

Las fuentes de Google se subconjuntan automáticamente. Esto reduce el tamaño del archivo de fuente y mejora el rendimiento. Debes definir qué subconjuntos deseas precargar. Si no especificas ningún subconjunto mientras preload es true, resultará en una advertencia.

Esto se puede hacer agregándolo a la llamada de función:

const inter = Inter({ subsets: ['latin'] })

const inter = Inter({ subsets: ['latin'] })

Consulta la Referencia de API de Fuentes para más información.

Usar múltiples fuentes

Puedes importar y usar múltiples fuentes en tu aplicación. Hay dos enfoques que puedes tomar.

El primer enfoque es crear una función utilitaria que exporte una fuente, la importe y aplique su className donde sea necesario. Esto asegura que la fuente se precargue solo cuando se renderice:

import { Inter, Roboto_Mono } from 'next/font/google'

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})

import { Inter, Roboto_Mono } from 'next/font/google'

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})

import { inter } from './fonts'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <div>{children}</div>
      </body>
    </html>
  )
}

import { inter } from './fonts'

export default function Layout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <div>{children}</div>
      </body>
    </html>
  )
}

import { roboto_mono } from './fonts'

export default function Page() {
  return (
    <>
      <h1 className={roboto_mono.className}>Mi página</h1>
    </>
  )
}

import { roboto_mono } from './fonts'

export default function Page() {
  return (
    <>
      <h1 className={roboto_mono.className}>Mi página</h1>
    </>
  )
}

En el ejemplo anterior, Inter se aplicará globalmente, y Roboto Mono se puede importar y aplicar según sea necesario.

Alternativamente, puedes crear una variable CSS y usarla con tu solución CSS preferida:

import { Inter, Roboto_Mono } from 'next/font/google'
import styles from './global.css'

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

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>
        <h1>Mi App</h1>
        <div>{children}</div>
      </body>
    </html>
  )
}

import { Inter, Roboto_Mono } from 'next/font/google'

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

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>
        <h1>Mi App</h1>
        <div>{children}</div>
      </body>
    </html>
  )
}

app/global.css

html {
  font-family: var(--font-inter);
}

h1 {
  font-family: var(--font-roboto-mono);
}

En el ejemplo anterior, Inter se aplicará globalmente, y cualquier etiqueta <h1> se estilizará con Roboto Mono.

Recomendación: Usa múltiples fuentes con moderación, ya que cada nueva fuente es un recurso adicional que el cliente debe descargar.

Fuentes locales

Importa next/font/local y especifica el src de tu archivo de fuente local. Recomendamos usar fuentes variables para el mejor rendimiento y flexibilidad.

import localFont from 'next/font/local'

// Los archivos de fuente pueden estar ubicados dentro de `app`
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

import localFont from 'next/font/local'

// Los archivos de fuente pueden estar ubicados dentro de `app`
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

Si deseas usar múltiples archivos para una sola familia de fuentes, src puede ser un array:

const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './Roboto-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
    {
      path: './Roboto-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './Roboto-BoldItalic.woff2',
      weight: '700',
      style: 'italic',
    },
  ],
})

Consulta la Referencia de API de Fuentes para más información.

Con Tailwind CSS

next/font se puede usar con Tailwind CSS a través de una variable CSS.

En el ejemplo a continuación, usamos la fuente Inter de next/font/google (puedes usar cualquier fuente de Google o fuentes locales). Carga tu fuente con la opción variable para definir el nombre de tu variable CSS y asígnala a inter. Luego, usa inter.variable para agregar la variable CSS a tu documento HTML.

import { Inter, Roboto_Mono } from 'next/font/google'

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

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

import { Inter, Roboto_Mono } from 'next/font/google'

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

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

Finalmente, agrega la variable CSS a tu configuración de Tailwind CSS:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}

Ahora puedes usar las clases utilitarias font-sans y font-mono para aplicar la fuente a tus elementos.

Precarga

Cuando se llama a una función de fuente en una página de tu sitio, no está disponible globalmente ni se precarga en todas las rutas. En cambio, la fuente solo se precarga en las rutas relacionadas según el tipo de archivo donde se usa:

Si es una página única, se precarga en la ruta única de esa página.
Si es un layout, se precarga en todas las rutas envueltas por el layout.
Si es el layout raíz, se precarga en todas las rutas.

Reutilizar fuentes

Cada vez que llamas a la función localFont o de fuente de Google, esa fuente se aloja como una instancia en tu aplicación. Por lo tanto, si cargas la misma función de fuente en múltiples archivos, se alojarán múltiples instancias de la misma fuente. En esta situación, se recomienda hacer lo siguiente:

Llamar a la función de carga de fuente en un archivo compartido
Exportarla como una constante
Importar la constante en cada archivo donde desees usar esta fuente

Fuentes

Optimización de carga de fuentes web con los cargadores integrados `next/font`.