티스토리 뷰
nextjs에서 글로벌로 font를 적용하는 방법을 두가지를 기록하려 합니다
1. local 환경에서 font 제공하기
public/fonts 경로에 font 파일을 넣어줍니다 저는 더페이스샵에서 만든 잉크립퀴드체를 사용하겠습니다
개인, 상업적용도로 사용할 수 있습니다
/styles/globals.css
body {
padding: 0;
margin: 0;
font-family: -apple-system, InkLipquid, sans-serif;
}
@font-face {
font-family: "InkLipquid";
font-weight: 200;
src: url("/fonts/InkLipquidFonts.ttf") format("truetype");
}
위 파일에 코드를 적어주면 폰트가 적용된걸 확인합니다
2. Embed link 이용하기
link 태그를 이용해서 CDN으로 폰트를 적용하는 방법을 알아보겠습니다 사용할 폰트는 구글에서 제공하는 Noto Sans KR 폰트로 본고딕이라고 불리는 유명한 폰트입니다 마찬가지로 개인, 상업적용도로 사용할 수 있습니다
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
구글 폰트 페이지에서 Embed 링크를 복사해옵니다
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
위 링크를 _document파일의 head에 적용해줍니다
/pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument;
_document.tsx 파일은 nextjs 최초생성시에는 존재하지않으며 직접 생성하여 Custom 할 수 있도록 제공하고 있습니다
커스텀하는 이유는 일반적으로 head, body 태그를 보강하는데 사용한다고 공식문서에서 안내하고 있습니다
(Noto Sans는 변화가 느껴지지 않아서 Black Hans Sans 로 대체했습니다)
'웹개발' 카테고리의 다른 글
| nextjs에서 typescript 사용하기 (0) | 2020.08.04 |
|---|---|
| nextjs 시작하기 (0) | 2020.08.01 |
댓글
공지사항
최근에 올라온 글