nextjs font, tailwind에서 지정

nextjs는 google 폰트의 모든 폰트를 내장하고 업데이트를 지원해준다고는 한다.

그렇기때문에 따로 google 폰트를 사용하는 한 따로 폰트를 다운받지 않아도 아래처럼 사용가능하고

해당 폰트가 내장되어있기때문에 https통신으로 폰트를 가져오지 않아도됨.


// font.ts
import { Roboto, Noto_Sans_KR } from "next/font/google"; 

export const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '700'],
  display: 'swap',
  variable: '--font-roboto', // 폰트 변수 설정
});

export const notoSansKr = Noto_Sans_KR({
  // preload: true, 기본값
  subsets: ["latin"], // 또는 preload: false
  weight: ["100", "400", "700", "900"],
  variable: '--font-notoSansKr'
});

이후

html 태그나 body 태그에 className= {roboto.className}: 폰트적용 or | className= {roboto.variable}: 변수사용

변수사용시

global.scss

html {

font-family: var(--font-roboto);

}

지정


import type { Metadata } from 'next';
import { roboto, notoSansKr } from '@/style/font';
import '@/style/globals.scss';
import clsx from 'clsx';

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="ko"
      className={clsx(roboto.variable, notoSansKr.variable)}> //이부분
      <body>{children}</body>
    </html>
  );
}

아래는 테일윈드설정


//tailwind.config
const config = {
theme: {
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
      roboto: ['var(--font-roboto)'], // 설정한 classname이나 variable에 맞게
      notoSansKr: ['var(--font-notoSansKr)'],
    },
   }
 }

pretendard

한글 폰트에 최적화 (베이스라인이슈)

get start

npm i pretendard



// /app/layout.tsxTS
import 'pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css'
import '@/styles/global.scss'
// ...


// /styles/global.scss
html {
  --font-pretendard: 'Pretendard Variable', Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI',
    'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
body {
  font-family: var(--font-pretendard);
}