-
[Next.js] NextJS에서 google font 사용 및 설정하기JavaScript/Next.js 2023. 8. 7. 00:48728x90반응형
Next.js에서 구글 폰트 사용하기
import { 폰트명 } from "next/font/google";<head>에 글로벌 폰트 적용시키기
import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export default function MyApp({ Component, pageProps }) { return ( <> <style jsx global>{` html { font-family: ${inter.style.fontFamily}; } `}</style> <Component {...pageProps} /> </> ) }한 페이지에서만 폰트 사용하기
import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export default function Home() { return ( <div className={inter.className}> <p>Hello World</p> </div> ) }Font Function Arguments
import React from "react"; import { Roboto } from "@next/font/google"; const bold = Roboto({ weight: "700", display: "fallback", subsets: ["latin"], style: "normal", variable: "--roboto-bold", fallback: ["system-ui"], }); const medium = Roboto({ weight: "500", display: "fallback", subsets: ["latin"], style: "normal", variable: "--roboto-medium", fallback: ["system-ui"], }); export { bold as robotoBold, medium as robotoMedium, }- weight: 폰트의 가중치를 설정하는 key
- display: css에서 font-display 키워드를 설정 하는 key
- subsets: font가 적용할 수 있는 언어 중에서 먼저 가져 올 나라의 언어를 설정하는 key
- style: font의 스타일이 normal인지 italic인지 설정하는 key
- variable: CSS 변수 방식으로 사용할 때의 이름을 정의하는 key
- fallback: 해당 font를 가져오지 못하였을 때의 대체 글꼴을 설정하는 key
https://nextjs.org/docs/pages/api-reference/components/font#nextfontgoogle
Components: Font | Next.js
Using Pages Router Features available in /pages
nextjs.org
https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#apply-the-font-in-head
Optimizing: Fonts | Next.js
Using Pages Router Features available in /pages
nextjs.org
LIST'JavaScript > Next.js' 카테고리의 다른 글
[Next.js] Next.js 13에서 변경된 부분, 핵심 기능 (0) 2023.07.07 [Next.js] 파일 기반 라우팅, 동적 라우팅, useRouter 을 알아보자 (0) 2023.06.20 [Next.js] next.js란? 새 프로젝트 생성하기 _React (2) 2023.06.18