들어가며

chingu 팀 프로젝트에서 Next.js를 사용하는데 마크업을 하던 도중 로컬 폰트 파일이 적용 안돼서 여기저기 구글링을 통해 알아왔다.

시도해본 것

• npm next font - 그래도 안됨
• public/static/fonts 폴더에 폰트 파일 넣고 Globalstyles.js에 @font-face로 불러와서 적용하기 - 안됨

Next.js에 로컬 폰트 적용하기

폰트 파일을 프로젝트 폴더에 넣기

public/static/fonts 폴더에 폰트 파일을 넣는다.

style.css 만들기

• 같은 폴더 public/static/fonts에 style.css를 만든다.
• @font-face를 작성한다.

@font-face {
    font-family: 'Soak-Up-The-Sun';
    src: url('Soak_Up_The_Sun_Script.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

_app.js에 적용하기

• _app.js에 style.css파일을 import 한다.

import GlobalStyles from "../components/GlobalStyles";
import Layout from "../components/Layout";
import { Hydrate } from "react-query";
import "../public/static/fonts/style.css";

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <GlobalStyles />
      <Layout>
        <Hydrate state={pageProps.dehydratedState}>
          <Component {...pageProps} />
        </Hydrate>
      </Layout>
    </>
  );
}

바로 적용해보자!

...
  h2 {
    font-family: "Soak-Up-The-Sun";
    font-weight: lighter;
    text-align: center;
    font-size: 9.375rem;
    color: ${COLORS.white};
  }

잘 적용되는 걸 확인할 수 있다.