Next.js와 Tailwind CSS를 이용해 로컬 폰트 설정하기

들어가기

tailwind CSS를 연습 해보기 위해서 새로운 프로젝트를 시작했다.

Next.js와 Tailwind CSS를 결합해서 사용하기 때문에 차근차근 하나씩 시도해보려 한다!

 

그 중에서 제일 먼저 타이포그래피를 설정해보자!

 

Next/Font

Next.js는 기본적으로 폰트도 최적화를 지원한다. 외부에서 받아오는 글꼴에 대한 네트워크 요청을 별도로 하지 않아 보안에 안정적인 부분도 있다! 또한 대부분의 웹 페이지는 글꼴을 받아오는 동안에 기본 글꼴을 보여주느라 깜빡이는 현상이 있는데, next의 font 최적화에서는 해당 부분도 온전히 해결되었다.

 

 

로컬폰트 적용하기

나는 구글 글꼴에는 없는 폰트를 사용할 것이기 때문에 폰트 파일을 받아서 사용할 예정이다.

여기(공식문서에 나오는 영상)를 보면 CDN을 통해 폰트를 로드할 수 있지만 그렇게 되면 위에서 설명한 것 같이 네트워크 요청을 해야하므로 나는 CDN에서 import를 하지 않고 폰트 파일을 받아서 사용하기로 결정하였다.

 

위와 같이 프로젝트 내부에 폰트 파일을 다운받아 놓는다. 그 후에

 

//styles/fonts.ts

import localFont from "next/font/local";

const pretendard = localFont({
  src: [
    {
      path: "../assets/font/pretendard/Pretendard-Thin.woff",
      weight: "100",
    },
    {
      path: "../assets/font/pretendard/Pretendard-ExtraLight.woff",
      weight: "200",
    },
    {
      path: "../assets/font/pretendard/Pretendard-Light.woff",
      weight: "300",
    },
    {
      path: "../assets/font/pretendard/Pretendard-Regular.woff",
      weight: "400",
    },
    {
      path: "../assets/font/pretendard/Pretendard-Medium.woff",
      weight: "500",
    },
    {
      path: "../assets/font/pretendard/Pretendard-SemiBold.woff",
      weight: "600",
    },
    {
      path: "../assets/font/pretendard/Pretendard-Bold.woff",
      weight: "700",
    },
    {
      path: "../assets/font/pretendard/Pretendard-ExtraBold.woff",
      weight: "800",
    },
    {
      path: "../assets/font/pretendard/Pretendard-Black.woff",
      weight: "900",
    },
  ],
  display: "swap",
  variable: "--font-pretendard",
});

export { pretendard };

 

다운받은 폰트 파일을 next/font/local을 통해 폰트를 등록해놓는다.

 

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}"
  ],
  theme: {
    extend: {
      fontFamily: {
        pretendard: "var(--font-pretendard)",
        calibre: "var(--font-calibre)",
      },
    },
  },
  plugins: [],
};
export default config;

그 다음 tailwind config 파일에 local폰트를 정의할 때 만든 variable명을 theme에 추가한다.

위 작업은 기존 tailwind css에 정의된 것 말고 더 추가를 하고 싶을 때 하는 설정이라고 할 수 있다!

 

 

<main className="flex min-h-screen flex-col items-center">
  <span className="font-calibre text-2xl font-medium">Welcome to my portfolio site!</span>
  <span className="font-pretendard text-2xl font-medium">Welcome to my portfolio site!</span>
  <span className="text-2xl font-medium">Welcome to my portfolio site!</span>
</main>

그리고 이렇게 font-pretendard 와 같이 config파일에서 정의한 fontFamily의 key값을 통해 폰트를 사용할 수 있다!

 

 

아래 사진을 보면 잘 적용된 것을 볼 수 있다.(폰트가 비슷해서 그런데 잘 적용된게 맞다..)