Módulo de Fuentes

Esta referencia de API te ayudará a entender cómo usar next/font/google y next/font/local. Para características y uso, consulta la página Optimización de Fuentes.

Argumentos de la Función de Fuente

Para su uso, revisa Fuentes de Google y Fuentes Locales.

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 fuentes.

Usado en next/font/local

• Requerido

Ejemplos:

• src:'./fonts/mi-fuente.woff2' donde mi-fuente.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 fuentes se llama en app/page.tsx usando src:'../styles/fonts/mi-fuente.ttf', entonces mi-fuente.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 a next/font/google.

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

• Requerido si la fuente usada 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 a 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 strings con los nombres de cada subconjunto que deseas que sean precargados. Las fuentes especificadas mediante subsets tendrán una etiqueta de precarga 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 pequeño. 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 de string '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 ser precargada 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 a usar si la fuente no se puede cargar. 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 como 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: '--mi-fuente': Se declara la variable CSS --mi-fuente

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%' }]

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 las fuentes de respaldo.

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

Variables CSS

Si deseas establecer 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 de carga 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',
})

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>

<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.

Uso de un archivo de definiciones de fuentes

Cada vez que llamas a la función localFont o a la función de 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 }

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

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'

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

Cambios de Versión