NextJS에서 웹폰트 적용하기

NextJS에서 소개하는 폰트 적용 방식이 여러가지가 있었지만 죄다 실패하고😢 cdn으로 연결하는 방법 하나만 먹혔다. 고로 cdn으로 폰트 스타일 적용하는 방식을 소개할까 한다.

1. CDN 찾기

당연한 말이지만, CDN 주소를 찾는 것이 1차 목표이다. 디자이너가 요구한 폰트 스타일은 지마켓 산스였고 지마켓 홈페이지에는 ttf 자료만 있었을 뿐 cdn 주소는 없었다...

그래도 구글링해본 결과 https://wess.tistory.com/category 에 나와 있어 생각보다는 손쉽게 구할 수 있었다.

2. CDN HEAD에 대입하기

_document.tsx파일을 찾아서 해당 CDN을 대입하였다.

3. 사용하기

마지막으로 font-family 값에 입력해서 웹폰트를 적용시켰다. 이 때, 아무 이름이나 지정하는 것이 아닌 해당 link에서 지정해준 family 이름을 사용해야 한다. 여기서는 'GmarketSans'였다

const Total = styled.div`
	font-family: 'GmarketSans';
`

4. 실패한 방법

처음에 ttf파일을 받고 나서 이걸 활용하려고 public/font폴더에 ttf 파일을 집어넣었다. 이후 globals.css에 다음과 같이 입력하였다.

저 url 주소값도 정확했고 틀릴만한 요소가 없다고 생각했는데 아직도 이유를 모르겠다....