Instalar una fuente en Next.js

Nota: site para convertir fuentes de texto a woof y woff2 https://transfonter.org/

Crea una carpeta para las fuentes

Crea una carpeta dentro de tu proyecto para almacenar los archivos .woff, .woff2, etc.

Por convención:

/public/fonts/geller/

Ejemplo:

/public/fonts/geller/GellerSans-Regular.woff2
/public/fonts/geller/GellerSans-Bold.woff2

Define las fuentes con @font-face

En tu archivo global de estilos (por ejemplo, si usas Tailwind, normalmente es ´src/app/globals.css´ o ´src/styles/globals.css´), agrega:

@font-face {
  font-family: 'Geller Sans';
  src: url('/fonts/geller/GellerSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geller Sans';
  src: url('/fonts/geller/GellerSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Usa la fuente en tu CSS o Tailwind

Si estás usando CSS:

body {
  font-family: 'Geller Sans', sans-serif;
}

Si estás usando Tailwind CSS:

Ve a tu archivo ´tailwind.config.ts´ o ´tailwind.config.js´ y agrega:

import type { Config } from 'tailwindcss'

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        geller: ['Geller Sans', 'sans-serif'],
      },
    },
  },
}

export default config

Luego en tu HTML o componentes puedes usar:

<h1 className="font-geller font-bold text-4xl">
  Hola mundo con Geller Sans
</h1>

Prueba la fuente

Levanta tu proyecto:

npm run dev

Y verifica en el navegador que la fuente se aplique correctamente. Puedes inspeccionar elementos con DevTools → pestaña Computed → font-family.