[240105] Font Optimization in Nextjs

Font Optimization in Nextjs

상황

• 요청한 폰트가 구글 폰트
• Nextjs 에서 @next/font/google 제공
• 가변 글꼴 사용을 권장함, 유연성 굿
• 자체 호스팅함, 배포와 동일한 도메인에서 제공하고 Google로 요청 보내지 않음

적용

import { createTheme } from "@mui/material/styles"
import { Noto_Sans_KR } from "next/font/google"

export const notoSansKR = Noto_Sans_KR({ subsets: ["latin"] })

const Theme = createTheme({
  typography: {
    fontFamily: notoSansKR.style.fontFamily,
  },
})

• mui 테마 폰트 적용했다 잘 나온다.

참고 자료

• Optimizing: Fonts
• Noto Sans Korean - Google Fonts