nextjs 14 온라인 폰트 로컬 폰트

by

온라인에서 폰트 사용하는 경우 woff2 확장자를 사용 할 수 있습니다. woff2 확장자 폰트를 구했다면 public/fonts 폴더로 이동 시켜서 사용 할 수 있습니다.

import localFont from "next/font/local"

const headingFont = localFont({
  src: "../../public/fonts/font.woff2"
});

nextjs 있는 next/font/local에서 import 할 수 있어요.

shadcn을 이용해서 cn 함수 이용해서 폰트 사용 할 수 있어요.

import { cn } from "@/lib/utils";

...

<div className={cn(
        "flex items-center justify-center flex-col",
        headingFont.className
        )}>

구글 폰트를 이용할 수도 있어요. 먼저 선언하는 부분입니다.

import { Poppins } from "next/font/google";

...

const textFont = Poppins({
  subsets: ["latin"],
  weight: [
    "100",
    "200",
    "300",
    "400",
    "500",
    "600",
    "700",
    "800",
    "900",    
  ]
})

역시 cn 함수를 이용해서 폰트를 사용 할 수 있어요.

<div className={cn(
        "text-sm md:text-xl text-neutral-400 mt-4 max-w-xs md:max-w-2xl text-center mx-auto",
        textFont.className
        )}>

완성 소스입니다.

/app/(marketing)/page.tsx

import localFont from "next/font/local"

import { Medal } from "lucide-react";
import { cn } from "@/lib/utils";
import { Poppins } from "next/font/google";

const headingFont = localFont({
  src: "../../public/fonts/font.woff2"
});

const textFont = Poppins({
  subsets: ["latin"],
  weight: [
    "100",
    "200",
    "300",
    "400",
    "500",
    "600",
    "700",
    "800",
    "900",    
  ]
})

const MarkingPage = () => {
  return (
    <div className="flex items-center justify-center flex-col">
      <div className={cn(
        "flex items-center justify-center flex-col",
        headingFont.className
        )}>
        <div className="mb-4 flex items-center border shadow-sm p-4 bg-amber-100 text-amber-700 rounded-full uppercase">
          <Medal className="h-6 w-6 mr-2" />
          Landing Page
        </div>
        <h1 className="text-3xl md:text-6xl text-center text-neutral-800 mb-6">
          Taskify helps team move
        </h1>
        <div className="text-3xl md:text-6xl bg-gradient-to-r from-fuchsia-600 to-pink-600 text-white px-4 p-2 rounded-md pb-4 w-fit">
          work forward.
        </div>
      </div>
      <div className={cn(
        "text-sm md:text-xl text-neutral-400 mt-4 max-w-xs md:max-w-2xl text-center mx-auto",
        textFont.className
        )}>
        Collaborate, manage projects, and reach new producitivity peaks.
        From high rises to the home office, the way your team works is unique - accomplish it all with Taskify.
      </div>
    </div>
  )
}

export default MarkingPage;

Leave a Comment