Di Next.js cara menginstall font **tidak lagi menggunakan <link> atau
@import dari Google Fonts seperti ini
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
rel="stylesheet"
/>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
</style>
Cara Baru: Menggunakan next/font/google
Next.js menyediakan package bawaan untuk import Google Fonts yang lebih optimal dan efisien:
// layout.tsx
import type { Metadata } from 'next';
import { Source_Sans_3 } from 'next/font/google';
import './globals.css';
// Load font
const fontSans = Source_Sans_3({
subsets: ['latin'],
});
export const metadata: Metadata = {
title: 'Belajar Next.js',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${fontSans.className} antialiased`}>
<h1>Ini layout root</h1>
{children}
</body>
</html>
);
}