JavaScript/Next.js
[Next.js] NextJS에서 google font 사용 및 설정하기
3o14
2023. 8. 7. 00:48
728x90
반응형
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