Módulo de Fuentes

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

Incluye alojamiento automático integrado para cualquier archivo de fuente. Esto significa que puedes cargar fuentes web de manera óptima sin cambio de diseño (layout shift).

También puedes usar convenientemente todas las Google Fonts. 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.

Para usar la fuente en todas tus páginas, agrégalo al archivo _app.js en /pages como se muestra a continuación:

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

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

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

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

Referencia

src

La ruta del archivo de fuente como string o un array de objetos (con tipo Array<{path: string, weight?: string, style?: string}>) relativa al directorio donde se llama a la función de carga de fuente.

Usado en next/font/local

• Requerido

Ejemplos:

• src:'./fonts/my-font.woff2' donde my-font.woff2 se coloca en un directorio llamado fonts dentro del directorio app
• src:[{path: './inter/Inter-Thin.ttf', weight: '100',},{path: './inter/Inter-Regular.ttf',weight: '400',},{path: './inter/Inter-Bold-Italic.ttf', weight: '700',style: 'italic',},]
• si la función de carga de fuente se llama en app/page.tsx usando src:'../styles/fonts/my-font.ttf', entonces my-font.ttf se coloca en styles/fonts en la raíz del proyecto

weight

El peso de la fuente con las siguientes posibilidades:

• Un string con los valores posibles de los pesos disponibles para la fuente específica o un rango de valores si es una fuente variable
• Un array de valores de peso si la fuente no es una fuente variable de Google. Aplica solo para next/font/google.

Usado en next/font/google y next/font/local

• Requerido si la fuente que se usa no es variable

Ejemplos:

• weight: '400': Un string para un solo valor de peso - para la fuente Inter, los valores posibles son '100', '200', '300', '400', '500', '600', '700', '800', '900' o 'variable' donde 'variable' es el predeterminado)
• weight: '100 900': Un string para el rango entre 100 y 900 para una fuente variable
• weight: ['100','400','900']: Un array de 3 valores posibles para una fuente no variable

style

El estilo de la fuente con las siguientes posibilidades:

• Un string con valor predeterminado de 'normal'
• Un array de valores de estilo si la fuente no es una fuente variable de Google. Aplica solo para next/font/google.

Usado en next/font/google y next/font/local

• Opcional

Ejemplos:

• style: 'italic': Un string - puede ser normal o italic para next/font/google
• style: 'oblique': Un string - puede tomar cualquier valor para next/font/local pero se espera que provenga de estilos de fuente estándar
• style: ['italic','normal']: Un array de 2 valores para next/font/google - los valores son normal e italic

subsets

Los subconjuntos de la fuente definidos por un array de valores string con los nombres de cada subconjunto que deseas precargar. Las fuentes especificadas mediante subsets tendrán una etiqueta de precarga de enlace inyectada en el head cuando la opción preload sea true, que es el valor predeterminado.

Usado en next/font/google

• Opcional

Ejemplos:

• subsets: ['latin']: Un array con el subconjunto latin

Puedes encontrar una lista de todos los subconjuntos en la página de Google Fonts para tu fuente.

axes

Algunas fuentes variables tienen ejes adicionales que se pueden incluir. Por defecto, solo se incluye el peso de la fuente para mantener el tamaño del archivo. Los valores posibles de axes dependen de la fuente específica.

Usado en next/font/google

• Opcional

Ejemplos:

• axes: ['slnt']: Un array con el valor slnt para la fuente variable Inter que tiene slnt como axes adicional como se muestra aquí. Puedes encontrar los valores posibles de axes para tu fuente usando el filtro en la página de fuentes variables de Google y buscando ejes distintos a wght

display

El display de la fuente con posibles valores string de 'auto', 'block', 'swap', 'fallback' o 'optional' con valor predeterminado de 'swap'.

Usado en next/font/google y next/font/local

• Opcional

Ejemplos:

• display: 'optional': Un string asignado al valor optional

preload

Un valor booleano que especifica si la fuente debe precargarse o no. El valor predeterminado es true.

Usado en next/font/google y next/font/local

• Opcional

Ejemplos:

• preload: false

fallback

La fuente de respaldo que se usará si no se puede cargar la fuente. Un array de strings de fuentes de respaldo sin valor predeterminado.

• Opcional

Usado en next/font/google y next/font/local

Ejemplos:

• fallback: ['system-ui', 'arial']: Un array que establece las fuentes de respaldo en system-ui o arial

adjustFontFallback

• Para next/font/google: Un valor booleano que establece si se debe usar una fuente de respaldo automática para reducir el Cambio Acumulativo de Diseño (CLS). El valor predeterminado es true.
• Para next/font/local: Un string o valor booleano false que establece si se debe usar una fuente de respaldo automática para reducir el Cambio Acumulativo de Diseño (CLS). Los valores posibles son 'Arial', 'Times New Roman' o false. El valor predeterminado es 'Arial'.

Usado en next/font/google y next/font/local

• Opcional

Ejemplos:

• adjustFontFallback: false: para next/font/google
• adjustFontFallback: 'Times New Roman': para next/font/local

variable

Un valor string para definir el nombre de la variable CSS que se usará si el estilo se aplica con el método de variables CSS.

Usado en next/font/google y next/font/local

• Opcional

Ejemplos:

• variable: '--my-font': Se declara la variable CSS --my-font

declarations

Un array de pares clave-valor de descriptores de fuentes que definen más el @font-face generado.

Usado en next/font/local

• Opcional

Ejemplos:

• declarations: [{ prop: 'ascent-override', value: '90%' }]

Ejemplos

Google Fonts

Para usar una fuente de Google, impórtala desde next/font/google como una función. Recomendamos usar fuentes variables para el mejor rendimiento y flexibilidad.

Para usar la fuente en todas tus páginas, agrégalo al archivo _app.js en /pages como se muestra a continuación:

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

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

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

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'],
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  )
}

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

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

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

Aplicar la fuente en <head>

También puedes usar la fuente sin un envoltorio y className inyectándola dentro del <head> de la siguiente manera:

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

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

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        html {
          font-family: ${inter.style.fontFamily};
        }
      `}</style>
      <Component {...pageProps} />
    </>
  )
}

Uso en una sola página

Para usar la fuente en una sola página, agrégalo a la página específica como se muestra a continuación:

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

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

export default function Home() {
  return (
    <div className={inter.className}>
      <p>Hola Mundo</p>
    </div>
  )
}

Especificar un subconjunto

Las Google Fonts se subconjuntan automáticamente. Esto reduce el tamaño del archivo de fuente y mejora el rendimiento. Deberás 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'] })

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

Uso de múltiples fuentes

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

El primer enfoque es crear una función de utilidad 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',
})

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:

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 de forma conservadora, 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 (variable fonts) para el mejor rendimiento y flexibilidad.

import localFont from 'next/font/local'

// Los archivos de fuentes pueden ubicarse dentro de `pages`
const myFont = localFont({ src: './my-font.woff2' })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
      <Component {...pageProps} />
    </main>
  )
}

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 la API de Fuentes para más información.

Con Tailwind CSS

next/font se integra perfectamente con Tailwind CSS usando variables CSS.

En el ejemplo siguiente, usamos las fuentes Inter y Roboto_Mono de next/font/google (puedes usar cualquier fuente de Google o fuente local). Usa la opción variable para definir un nombre de variable CSS, como inter y roboto_mono para estas fuentes, respectivamente. Luego, aplica inter.variable y roboto_mono.variable para incluir las variables CSS en tu documento HTML.

Nota importante: Puedes agregar estas variables a las etiquetas <html> o <body>, dependiendo de tu preferencia, necesidades de estilo o requisitos del proyecto.

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

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

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

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${inter.variable} ${roboto_mono.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}

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

Tailwind CSS v4

A partir de Tailwind v4, no se requiere configuración por defecto. Si necesitas configurar Tailwind, puedes seguir la documentación oficial para configurar el archivo CSS global.

@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-inter);
  --font-mono: var(--font-roboto-mono);
}

Tailwind CSS v3

/** @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 de utilidad font-sans y font-mono para aplicar la fuente a tus elementos.

<p class="font-sans ...">The quick brown fox ...</p>
<p class="font-mono ...">The quick brown fox ...</p>

Aplicación de estilos

Puedes aplicar los estilos de fuente de tres maneras:

• className
• style
• Variables CSS

className

Devuelve un className CSS de solo lectura para la fuente cargada que se pasará a un elemento HTML.

<p className={inter.className}>¡Hola, Next.js!</p>

style

Devuelve un objeto style CSS de solo lectura para la fuente cargada que se pasará a un elemento HTML, incluyendo style.fontFamily para acceder al nombre de la familia de fuentes y fuentes de respaldo.

<p style={inter.style}>Hola Mundo</p>

Variables CSS

Si prefieres definir tus estilos en una hoja de estilo externa y especificar opciones adicionales allí, usa el método de variables CSS.

Además de importar la fuente, también importa el archivo CSS donde se define la variable CSS y establece la opción variable del objeto cargador de fuentes de la siguiente manera:

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

Para usar la fuente, establece el className del contenedor padre del texto que deseas estilizar al valor variable del cargador de fuentes y el className del texto a la propiedad styles del archivo CSS externo.

<main className={inter.variable}>
  <p className={styles.text}>Hola Mundo</p>
</main>

Define la clase selector text en el archivo CSS component.module.css de la siguiente manera:

.text {
  font-family: var(--font-inter);
  font-weight: 200;
  font-style: italic;
}

En el ejemplo anterior, el texto Hola Mundo se estiliza usando la fuente Inter y la fuente de respaldo generada con font-weight: 200 y font-style: italic.

Usando un archivo de definiciones de fuentes

Cada vez que llamas a la función localFont o a la fuente de Google, esa fuente se alojará como una instancia en tu aplicación. Por lo tanto, si necesitas usar la misma fuente en múltiples lugares, debes cargarla en un solo lugar e importar el objeto de fuente relacionado donde lo necesites. Esto se hace usando un archivo de definiciones de fuentes.

Por ejemplo, crea un archivo fonts.ts en una carpeta styles en la raíz de tu directorio app.

Luego, especifica tus definiciones de fuentes de la siguiente manera:

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// define tus fuentes variables
const inter = Inter()
const lora = Lora()
// define 2 pesos de una fuente no variable
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// define una fuente local personalizada donde GreatVibes-Regular.ttf se almacena en la carpeta styles
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

Ahora puedes usar estas definiciones en tu código de la siguiente manera:

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'

export default function Page() {
  return (
    <div>
      <p className={inter.className}>Hola mundo usando la fuente Inter</p>
      <p style={lora.style}>Hola mundo usando la fuente Lora</p>
      <p className={sourceCodePro700.className}>
        Hola mundo usando la fuente Source_Sans_3 con peso 700
      </p>
      <p className={greatVibes.className}>Mi título en fuente Great Vibes</p>
    </div>
  )
}

Para facilitar el acceso a las definiciones de fuentes en tu código, puedes definir un alias de ruta en tus archivos tsconfig.json o jsconfig.json de la siguiente manera:

{
  "compilerOptions": {
    "paths": {
      "@/fonts": ["./styles/fonts"]
    }
  }
}

Ahora puedes importar cualquier definición de fuente de la siguiente manera:

import { greatVibes, sourceCodePro400 } from '@/fonts'

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. Más bien, la fuente solo se precarga en la(s) ruta(s) relacionada(s) según el tipo de archivo donde se usa:

• si es una página única, se precarga en la ruta única para esa página
• si está en la App personalizada, se precarga en todas las rutas del sitio bajo /pages

Cambios de versión