Next.js 폰트 설정하기 (feat.styled-components)

최근에는 순수 React를 사용하기보다 거의 모든 프로젝트에서 Next.js를 사용하고 있다. Next.js를 사용하지 않을 이유가 없기 때문인데.. Next.js의 장점에 대해서는 다른 글에서 자세히 써보도록 할 것이다.

 

보통 폰트는 프로젝트 세팅할 때 적용하고 따로 설정할 일이 많지 않기 때문에 방법을 잘 잊어버린다. 다시 찾아보는 수고를 덜기 위해서 Next.js에 폰트를 적용하는 방법을 자세히 작성해 볼 것이다. 

 

1. 라이브러리, 프레임워크 버전

- Next.js 12.2.3 (13버전이 아님 주의!)

- styled-components 5.3.5 

 

폰트 관련 설정이므로 css관련 버전만 명시한다.

 

2. 사용할 폰트

- Prentendard

Pretendard는 한글에 최적화되어 있고 9개의 다양한 굵기를 지원하고 있다. 또 여러 플랫폼에서 동일한 시스템 폰트를 지원하도록 도와주는 등,, 많은 장점을 가지고 있는 최신 트렌드 폰트라고 할 수 있다.  

 

다양한 IT기업들이 Pretendard를 사용하고 있다.

pretendard를 사용하는 기업들

 

https://cactus.tistory.com/306

Pretendard

위 링크에서 다운로드 받을 수 있다.

 

3. 적용

Pretendard 폰트까지 다운로드하였다면 이제 적용을 해보도록 하자.

 

3.1 폰트 변환

다운받은 압축파일을 풀어보면, 다양한 파일들이 있는 것을 확인할 수 있을 것이다. 

Pretendard 폴더 > static 위치를 확인해 보면 다양한 weight의. otf파일을 확인할 수 있다.

. otf의 확장을 그대로 사용할 수 있지만 웹에 맞게 개발된 .woff 또는 .woff2 사용을 권장한다. W3C에서도 .woff, .woff2 사용을 권장하고 있다. woff는 otf나 ttf보다 훨씬 작은 용량으로 사용가능하도록 도와준다.

.otf 확장자를 .woff로 변환시켜 보자. 무료로 변환을 도와주는 사이트가 있다.

https://transfonter.org/

 

트랜스폰터

.otf 확장자를 가지고 있는 pretendard 폰트를 모두 긁어서 드래그 앤 드롭해 보자. 정말 간단하다. 업로드가 완료되면 자동으로 Convert 버튼이 활성화될 것이다.

 

트랜스폰터 세팅

원하는 세팅을 입력해주면 된다. 필자는 woff, woff2 로 변환할 것이기 때문에 위와 같이 기본 설정을 이용하겠다.

Convert 버튼 클릭!! 컨버팅이 완료된 파일을 다운로드 받자!

 

3.2 Next.js에 적용하기

폰트 파일

다운로드한 woff, woff2 확장자의 파일들을 public 폴더 하위에 fonts 파일을 만들어 넣어두자.

 

Styled-components는 createGlobalStyle이라는 전역 css용 api를 제공하는데 이상하게 이곳에서 직접 font-face를 적용하고 확인해 봤을 경우에는 이상하게 모든 요청마다 font를 불러오는 버그가 발생했다.

버그인지 뭔지 원인은 확실하지 않지만 어쨌든 매요청마다 불러오기 때문에 폰트가 매번 깜빡이는 현상이 일어나는 것을 확인했다.

const globalStyle = css`
  ${reset};

  html {
    font-size: 10px;
  }

  body {
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
      'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    font-style: normal;

    color: ${palette.BLACK_33};
  }
`;

const GlobalStyle = createGlobalStyle`
  ${globalStyle}
`;

 

깜빡거리는 이슈를 해결하기 위해서 순수 css 파일을 만들고 거기에 font-face를 설정하고 다른 파일에서 import 해서 사용하는 방법을 권장한다. 

 

src 하위에 styles 폴더를 하나 만들고 하위에 font.css라는 파일을 만들고 아래와 같이 입력한다.

@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Black.woff2') format('woff2'), url('/fonts/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'), url('/fonts/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Bold.woff2') format('woff2'), url('/fonts/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-SemiBold.woff2') format('woff2'), url('/fonts/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Medium.woff2') format('woff2'), url('/fonts/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Regular.woff2') format('woff2'), url('/fonts/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

필자는 400부터 900까지의 weight만 사용할 것이기 때문에 위와 같이 입력했는데 더 사용하려면 위와 같은 형식으로 더 추가만 해주면 된다. 

 

app.tsx

import '../styles/font.css';

app.tsx에 위 코드만 추가해 주었고 이제 세팅이 완료되었다. 사용하고 싶은 곳에서 font-weight만 바꿔주면 잘 바뀌는 것을 확인할 수 있을 것이다.