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 autoalojamiento integrado automático 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 size-adjust subyacente.

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 autoalojan con el resto de tus recursos estáticos. El navegador no envía solicitudes a Google.

Fuentes de Google

Autoalojamiento automático de cualquier fuente de Google. Las fuentes se incluyen en el despliegue y se sirven desde el mismo dominio que tu despliegue. 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.

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

pages/_app.js

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:

pages/_app.js

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:

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. 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 de <head> de la siguiente manera:

pages/_app.js

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:

pages/index.js

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 fuentes de Google se subconjuntan automáticamente. Esto reduce el tamaño del archivo de fuente y mejora el rendimiento. Deberás definir qué subconjuntos deseas precargar. No especificar ningún subconjunto mientras preload es true resultará en una advertencia.

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

pages/_app.js

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

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 puede importarse y aplicarse según sea necesario.

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

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.

pages/_app.js

import localFont from 'next/font/local'

// Los archivos de fuente 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 API de Fuentes para más información.

Con Tailwind CSS

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

En el ejemplo siguiente, 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ígnalo a inter. Luego, usa inter.variable para agregar la variable CSS a tu documento HTML.

pages/_app.js

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

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

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

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 de utilidad 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 se precarga solo 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 está en la App personalizada, se precarga en todas las rutas del sitio bajo /pages

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:

Llama a la función de carga de fuente en un archivo compartido
Expórtala como una constante
Importa la constante en cada archivo donde desees usar esta fuente

On this page