개발 서버에선 잘 작동되던 구글 폰트가 실 서버에 올린 후 폰트를 다운로드 하지 않는 현상이 발생했다. _document.tsx 파일 내 link 태그를 통해 적용 했고 브라우저 개발 도구에서도 head 내에 분명 존재하는데 이상하게 Sources 탭에서 다운로드 받는 내역이 존재하지 않았다. 이에 대한 해결방법을 알아보자.
요점
_document.tsx 내 태그로 입력하는 것이 아닌 css 파일 내 임포트 한다.
_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';
const Document = () => {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
};
export default Document;Next 공식 사이트에서도 상기 내용과 같이 태그를 통해 임포트 하는 예제가 있고 구글링을 통해서도 같은 내용으로 임포트 하여 사용하는 게시글을 많이 찾아 볼 수 있다.
아마도 모든 프로젝트에서 안되는 것은 아니고 버전 차이 등으로 인해 발생하는 것 같은데 만약 폰트가 적용되지 않는다면 아래 방법을 사용하도록 하자.
global.css
@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap");css 파일 내 임포트 하여 사용하면 잘 작동한다.
유의 사항으론
호이스팅이 안되는 경우를 대비해 font-family 등으로 인해 불러오기 전에 임포트 시켜준다.
tailwind css를 사용 중 이라면@tailwind base;@tailwind components;@tailwind utilities;상단에 임포트 시켜준다.
맘 편하게 가장 상단에 위치 시키는게 좋을 것 같다.
대안
글 작성 중 알게 된 부분인데 Next 공식 사이트에 구글 폰트 최적화를 위한 라이브러리가 있다.
브라우저에서 구글 폰트 다운로드를 하지 않고 빌드시 다운로드 하여 임포트 하도록 되어있는 것 같다.
아래 주소를 참고하자.
https://nextjs.org/docs/basic-features/font-optimization