Next.js를 찍먹해보면서 알게 된 font 적용
Next.js를 이제 사용해봐서 이전 버전이 어떻게 되어 있는지는 모르겠지만 지금까지 구글 font cdn을 통해 css를 적용했었다. Next.js 13버전을 보니 훨씬 더 간편하게 사용할 수 있는 것 같아 적어본다.
자동 호스팅
브라우저에서 따로 Google에 요청을 보내지 않는다고 한다. 그러면서 성능 측에서 향상되었다.
모든 Google 글꼴을 자동으로 자체 호스팅합니다.
next/font/google 함수로 사용하려는 글꼴을 가져와서 시작하면 된다.
사용법
import { Nunito } from 'next/font/google' // nunito 폰트 가져오기
const font = Nunito({
subsets: ["latin"]
})
<html lang="en">
<body className={font.className}>{children}</body>
</html>이렇게 하면 폰트가 적용된 것을 확인할 수 있다.
'기타 > WEB' 카테고리의 다른 글
| [JavaScript] 문자열을 숫자로 변환하기 (0) | 2023.06.05 |
|---|---|
| Node https 적용 (0) | 2022.08.28 |
| MEDIA WIKI (0) | 2022.08.28 |
| Cookies & Sessions (0) | 2022.08.28 |