← Back to Blog
web

Cara Setup Font Lokal di Next.js 15+ dan Tailwind v4

October 13, 2025

Cara Setup Font Lokal di Next.js 15+ dan Tailwind v4 cover

Perhatikan bagian yang saya komenin, itu adalah hal-hal yang akan kita tambahkan untuk setup font lokal.

File: layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";

// kita perlu import ini untuk font lokal
import localFont from "next/font/local";

import "./globals.css";
import Navbar from "@/components/layout/Navbar";
import Footer from "@/components/layout/Footer";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

//Lalu disini definisikan fontnya
const caveatFont = localFont({
  src: "../../public/fonts/Caveat.woff2",
  variable: "--font-caveat",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">

      //tambahin fontnya di body, sehingga fontnya bisa dipakai dimana aja di kode kamu 
      <body
        className={`${geistSans.variable} ${geistMono.variable} ${caveatFont.variable} antialiased`}
      >
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  );
}

File: globals.css

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  
  //disini juga ditambahin fontnya
  --font-test: var(--font-caveat);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

Contoh Penggunaan

'use client';

import Link from 'next/link';

export default function Navbar() {
  return (
    <header className="fixed top-0 left-0 right-0 bg-[var(--color-cream)] z-10 shadow-md">
      <nav className="flex items-center justify-between w-full max-w-4xl mx-auto p-4">

      //ini merupakan contoh penggunaannya
        <div className="font-test">
          <Link href="/">Vito Solin</Link>
        </div>
      </nav>
    </header>
  );
}