Nextjs에서 폰트적용하기

분명 프로젝트에 폰트를 적용했는데, 실제 배포서버에서는 보이지 않는다...

프로젝트가 초기 단계에 설정해 놨는데 나중에 배포서버에서 확인해보니 폰트가 적용이 안되는 것이었다... 정확하게 말하면, 내 컴퓨터에서 보는 배포화면에서는 폰트가 적용되어서 보이는데, 다른 사람들 컴퓨터나, 핸드폰에서 확인하면 안보이는 것이었다...

뭐가 문제일까?

내가 생각하는 문제

생각을 해 봤을 때, 역시 내가 폰트를 적용한 방식에 문제가 있었던 것 같다. styled-components에서 지원하는 createGlobalstyle을 사용해서 폰트를 구현해 놨는데, local상에 존재하는 폰트를 가져오는게 아니라, 내 컴퓨터에 다운받아진 폰트를 받아오는 것 이었다.

//기존코드
// ./src/styles/globalStyled.tsx
export const GlobalFont = createGlobalStyle`
  @font-face {
  font-family: 'Pretendard', sans-serif;
  src: url('/public/fonts/Pretendard-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  }
  @font-face {
    font-family: 'Pretendard', sans-serif;
    src: url('/public/fonts/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  
  ...
 
 @font-face {
    font-family: 'Pretendard', sans-serif;
    src: url('/public/fonts/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
`;

//전체 Pretendard적용
export const GlobalStyle = createGlobalStyle`
  html {
    font-family: "Pretendard", sans-serif;
  }
`;

이런식으로 적용을 시켜서
_app.tsx에 직접 적용시키는 방식으로 진행을 했는데, 적용이 안됐다.

해결책

계속 구글링을 통해서 찾아보다가, next/local/font라는 next에서 지원하는 기능이 있어서 그걸 적용해 보기로 했다.
내가 우리 사이트에서 사용하는 폰트는 Pretendard였는데, 이 역시 적용이 가능한 것 같았다.

적용

./src/pages/fonts경로에 폰트를 다운을 해 주었다.

이걸 해 보면서, 기존에 내 폰트가 적용이 안됐던 이유도, 폰트를 저장한 경로에 문제가 있지 않았을까? 하는 생각도 들었다.(나중에 적용시켜보기로하고, 넘어감)

_app.tsx폴더에서 localFont를 적용했다.

import '@/styles/globals.css';

...

import localFont from 'next/font/local';
const pretendard = localFont({
  src: [
    {
      path: './fonts/Pretendard-Black.woff2',
      weight: '900',
      style: 'normal',
    },
    {
      path: './fonts/Pretendard-ExtraBold.woff2',
      weight: '800',
      style: 'normal',
    },
    
    ...
   
    {
      path: './fonts/Pretendard-Light.woff2',
      weight: '300',
      style: 'normal',
    },
    {
      path: './fonts/Pretendard-ExtraLight.woff2',
      weight: '200',
      style: 'normal',
    },
    {
      path: './fonts/Pretendard-Thin.woff2',
      weight: '100',
      style: 'normal',
    },
  ],
});

export default function App({ Component, pageProps }: AppProps) {
  
  ...

  return (
    <RecoilRoot>
      <SocketProvider>
        <React.Suspense fallback={<div>Loading...</div>}>
          {isClient && (
            <MSWProvider>
              <main className={pretendard.className}>
                <Seo />
                <Component {...pageProps} />
                <ScrollToTopButton />
              </main>
            </MSWProvider>
          )}
        </React.Suspense>
      </SocketProvider>
    </RecoilRoot>
  );
}

실제 랜더링되는 컴포넌트 위에 main이라는 태그를 생성하고, className으로 pretendard.className만 적용해주면 간단하게 폰트가 적용된걸 볼 수 있었다.

localFont를 사용할 때 각각 weight를 지정해 줘서 weight별로 다른 폰트가 지정되도록 설정해 주었다.

폰트가 잘 적용 되었다!!