행복을 담는 블로그

[Next.js] Font 적용하기 / localFont( ) 적용하기 본문

FrontEnd/Next.js

[Next.js] Font 적용하기 / localFont( ) 적용하기

hyun0zin 2024. 6. 20. 01:13

Next.js에서 폰트 적용하는 방법

우선 Next.js에서 font를 적용하는 방법으로는 google font를 적용하는 방법과 font 파일을 다운받아서 직접 localFont로 적용하는 방법이 있다.
그 중에서 이번엔 localFont를 직접 적용하는 방법을 시도해보았다.

 

1. 폰트 다운로드하기

우선 public 폴더 > fonts 폴더 안에 다운로드 받은 폰트 파일을 저장하였다.

 

2. Next.js에 localFont() 적용하기

이후 fonts.ts 파일을 만들고 next/font/local로 부터 localFont를 import 해와서 내가 저장한 폰트를 종류별로 저장한다.

import localFont from "next/font/local";

export const hakgyoansim = localFont({
  src: [
    {
      path: "./HakgyoansimBareonbatangR.ttf",
      weight: "400",
    },
    {
      path: "./HakgyoansimBareonbatangB.ttf",
      weight: "700",
    },
  ],
  variable: "--font-hakgyoansim",
});

export const pretendard = localFont({
  src: [
    {
      path: "./PretendardVariable.woff2",
      weight: "45 920",
    },
  ],
  variable: "--font-pretendard",
});

 

3. layout.tsx 폰트 적용하기

이후 layout.tsx 파일에서 원하는 폰트를 import 해 온 다음, html과 body에 적용해주었다.

나는 전체 기본 폰트로는 pretendard를 적용해주었고, 이후 원하는 곳에서만 hakgyoansim 폰트를 불러서 쓰고 싶어서 따로 사용하였다.

import type { Metadata } from "next";
import { hakgyoansim, pretendard } from "../../public/fonts/fonts";
import "./globals.css";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={pretendard.className}>
      <body lang="en" className={`${hakgyoansim.variable}`}>
        <div className=" flex flex-col items-center min-h-screen">
          <Header />
          <Navbar />
          <div className="flex-grow w-[1280px] flex justify-center">
            {children}
          </div>
          <Footer />
        </div>
      </body>
    </html>
  );
}

이렇게 pretendard.className으로 불러오면 해당 폰트가 모든 곳에서 적용된다.

<html lang="en" className={pretendard.className}>

또한 원하는 곳에서 tailwindCss로 불러서 쓰고 싶다면, 원하는 폰트를 variable로 불러온다.

<body lang="en" className={`${hakgyoansim.variable}`}>

 

4.tailwindCss 추가하기

이후 tailwindCss로 사용하고 싶다면, tailwind.config.ts 파일에 fontFamily를 추가해준다.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        hakgyoansim: ["var(--font-hakgyoansim)"],
        pretendard: ["var(--font-pretendard)"],
      },
    },
  },
  plugins: [require("daisyui")],
};
export default config;

 

이렇게 추가를 하게 될 경우, 아래와 같이 내가 추가한 font를 tailwindCss로 불러서 사용할 수 있게 된다!

 

역시 갓 공식문서 ⭐️

https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts

 

Optimizing: Fonts | Next.js

Optimize your application's web fonts with the built-in `next/font` loaders.

nextjs.org

 

이상 폰트 적용 끝@ 이제 원하는 폰트를 찾아서 다 적용해봐야겠다~

'FrontEnd > Next.js' 카테고리의 다른 글

[Next.js] Rendering 패턴  (0) 2024.03.11
[Next.js] Next.js 프로젝트 시작하기  (0) 2024.03.11
[Next.js] Next.js에 대해서 알아보자🧐  (0) 2024.03.11
'FrontEnd/Next.js' Related Articles more