next v13 부터 @next/font 라는 기능이 추가되었습니다.

@next/font 장점

• next에서 제공하는 google font를 자체적으로 사용할수 있습니다.
• google font를 next에서 제공하기 때문에 네트워크 요청으로 font를 load할 필요가 없습니다.
• google font 외에도 다른 폰트를 local/font 를 적용하여 사용할수 있습니다.

*nextjs(V13.0.3) + styled-components 기준입니다

먼저 @next/font 13.0.3 버전을 설치합니다(버전은 next의 버전과 동일하게 하기 위해 13.0.3 버전을 설치했습니다)

// 폴더 구조 : public/fonts/index.tsx

import localFont from '@next/font/local';

const SCoreDream = localFont({
    src: [
        {
            path: './SCoreDream3.woff',
            weight: '300',
        },
        {
            path: './SCoreDream3.woff2',
            weight: '300',
        },
        {
            path: './AnyConv.com__SCDream4.woff',
            weight: '400',
        },
        {
            path: './SCoreDream4.woff2',
            weight: '400',
        },
        {
            path: './AnyConv.com__SCDream5.woff',
            weight: '500',
        },
        {
            path: './SCoreDream5.woff2',
            weight: '500',
        },
        {
            path: './AnyConv.com__SCDream6.woff',
            weight: '600',
        },
        {
            path: './SCoreDream6.woff2',
            weight: '600',
        },
    ],
});

export default SCoreDream;

위와같이 font 파일이 있는 폴더에서 작성하여 줍니다.

// _app.tsx

import SCoreDream from '@fonts/index';

<main className={SCoreDream.className} >
	<Component {...pageProps} />
</main>

그후 _app.tsx 파일에서 Componet를 임의의 태그로 감싼후 폰트를 적용할수 있습니다.