Next.js에서 Google Font 적용하기

요새 면접보러 다니느라 너무 바쁘고 힘든 나날이 연속되서 프로젝트에 손을 놓고 있었습니다 ㅠㅠ..

언능 마무리 짓고자 고고 하겠습니다.

 

저는 이 프로젝트를 크롬으로만 확인하며 UI를 제작했습니다.

그러다 기능테스트를 위해 사파리로 들어갔었는데 왠걸.. 궁서체 비슷한 폰트로 나오는겁니다.

다른 환경에서도 동일한 UI를 보여주기 위해서는 폰트를 꼭 적용해야겠다 라고 느끼고 Next.js에서는 어떻게 웹폰트를 적용시켜야 하는지 검색해보았습니다.

그냥 리액트는 Google Font 에서 지원해주는 주소를 복붙만 하면 됐는데 Next.js는 조금 다르다고 합니다.

 

 

관련 공식문서

https://nextjs.org/docs/basic-features/font-optimization

Basic Features: Font Optimization | Next.js

 

 

Next.js는 모든 Google 글꼴을 자동으로 자체 호스팅 하여 브라우저에서 Google로 요청을 보내지 않는다고 합니다.

그럼 공식문서를 따라서 글꼴을 변경해보도록 하겠습니다.

 

현재 글꼴은 기본 글꼴입니다.

 

 

 

저는 Noto Sans Korean 글꼴을 가져다 사용할 계획입니다.

_app.tsx 파일에서 Google Font를 import를 해오겠습니다.

자동완성이 되네요..! 

import {Noto_Sans_KR} from 'next/font/google';

이렇게 import 해주었습니다.

 

그리고 변수를 만들어주고

const notoSans = Noto_Sans_KR({subsets: ['latin']})

 

저는 Header 컴포넌트도 있기 때문에 Header와 Component를 main 태그로 감싸줬습니다.

return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools />
      <Provider store={store}>
        <main className={notoSans.className}>
          <Header />
          <Component {...pageProps} />
        </main>
      </Provider>
    </QueryClientProvider>
  );

 

근데 이런 에러가 생기네요.

'{ subsets: "latin"[]; }' 형식의 인수는 '{ weight: "100" | "300" | "400" | "500" | "700" | "900" | ("100" | "300" | "400" | "500" | "700" | "900")[]; style?: "normal" | "normal"[] | undefined; display?: Display | undefined; ... 4 more ...; subsets?: "latin"[] | undefined; }' 형식의 매개 변수에 할당될 수 없습니다.

'weight' 속성이 '{ subsets: "latin"[]; }' 형식에 없지만 '{ weight: "100" | "300" | "400" | "500" | "700" | "900" | ("100" | "300" | "400" | "500" | "700" | "900")[]; style?: "normal" | "normal"[] | undefined; display?: Display | undefined; ... 4 more ...; subsets?: "latin"[] | undefined; }' 형식에서 필수입니다.ts(2345)

index.d.ts(9002, 5): 여기서는 'weight'이(가) 선언됩니다.

 

 

 

가변글꼴이 아니라서 그런가봅니다.

공식문서에서도 가변글꼴을 사용할 수 없다면 두께를 지정해야한다고 나와있어요.

 

 

아래와 같이 두께를 지정해주었습니다.

const notoSans = Noto_Sans_KR({
  weight: '300',
  subsets: ['latin'],
});

 

크롬은 폰트가 잘 적용된 것을 볼 수 있습니다.

 

 

사파리 환경에서도 잘 적용 되었습니다.