Next.js 13버전에서 로컬 폰트 적용하기

Next.js 12버전에서 로컬 폰트를 적용할 때는 @font-face를 설정해준 다음 font-family: 설정해준 이름을 하면 적용할 수가 있었다. 그런데 docs를 보니 13버전에 localFont라는 것이 있어서 그걸 사용해서 하면 font-face를 일일이 설정해주지 않아도 되는 거 같아서 써보기로 했다.

// fonts.ts
import localFont from 'next/font/local';

export const Pretendard = localFont({
  src: '../public/fonts/PretendardVariable.woff2',
});

// Layout.tsx
function Layout({ children }: React.PropsWithChildren) {

  return (
    <Container className={Pretendard.className}>
      <Navbar />
      <Main>{children}</Main>
    </Container>
  );
}

docs에 나온대로 이런 식으로 className을 줘서 적용해보았는데, 나는 기존에 했던 것처럼 여러 폰트를 넣은 다음, 선택해서 사용하고 싶었다.

function Layout({ children }: React.PropsWithChildren) {
  const fontClasses = classNames(UhBeeSe_hyun.className, Pretendard.className);

  return (
    <Container className={fontClasses}>
      <Navbar />
      <Main>{children}</Main>
    </Container>
  );
}

그래서 이런 식으로 하고 싶었는데 하위 컴포넌트 내에서 font-family: 'Pretendard' 이런 식으로는 적용이 되지 않는 것이었다. 13버전에서는 전역적으로 설정하고 하위 컴포넌트에서 사용하는 방법은 아직 제공되고 있지 않은 거 같았다. 그래서 사용하고자 하는 하위 컴포넌트에서 import를 해서 사용했다.

import { UhBeeSe_hyun } from '../../utils/fonts';

const Layout = styled.div`
  font-family: ${UhBeeSe_hyun.style.fontFamily};
`;

이 프로젝트에서는 emotion을 사용해서 스타일링을 하고 있는데, import를 매번 해주는 것이 아니라 ThemeProvider를 사용해서 할 수도 있을 거 같아서 시도해봤지만, Provider에 넘겨준 theme에 대해서 설정해준 fonts값이 접근이 되지 않았다. 이 부분은 나중에 다시 체크해보아야 할 거 같다. 일단 현재는 기본 폰트만 전역적으로 설정해준다음, 다른 폰트를 사용하는 부분은 import해서 적용해주었다.