Cómo usar fuentes
El módulo next/font optimiza automáticamente sus fuentes y elimina solicitudes de red externas para mejorar la privacidad y el rendimiento.
Incluye auto-hospedaje integrado para cualquier archivo de fuente. Esto significa que puede cargar fuentes web de manera óptima sin cambios de diseño (layout shift).
Para comenzar a usar next/font, impórtelo desde next/font/local o next/font/google, llámelo como una función con las opciones apropiadas y establezca el className del elemento al que desea aplicar la fuente. Por ejemplo:
import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function Layout({ children }) {
return (
<html className={geist.className}>
<body>{children}</body>
</html>
)
}Las fuentes están limitadas al componente en el que se utilizan. Para aplicar una fuente a toda su aplicación, agréguela al Layout Raíz.
Fuentes de Google
Puede auto-hospedar automáticamente cualquier fuente de Google. Las fuentes se incluyen como activos estáticos y se sirven desde el mismo dominio que su implementación, lo que significa que el navegador no envía solicitudes a Google cuando el usuario visita su sitio.
Para comenzar a usar una fuente de Google, importe la fuente elegida desde next/font/google:
import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}Recomendamos usar fuentes variables para obtener el mejor rendimiento y flexibilidad. Pero si no puede usar una fuente variable, deberá especificar un peso:
import { Roboto } from 'next/font/google'
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
})
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'],
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={roboto.className}>
<body>{children}</body>
</html>
)
}Fuentes locales
Para usar una fuente local, importe su fuente desde next/font/local y especifique el src de su archivo de fuente local. Las fuentes se pueden almacenar en la carpeta public. Por ejemplo:
import localFont from 'next/font/local'
const myFont = localFont({
src: './my-font.woff2',
})
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'
const myFont = localFont({
src: './my-font.woff2',
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={myFont.className}>
<body>{children}</body>
</html>
)
}Si desea 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',
},
],
})