MUI에서는 Roboto 글꼴을 기본으로 제공한다
Noto Sans KR 글꼴을 사용하기 위해 font face를 설정해줬다.
기본적으로 layout.tsx 에서 전역으로 font 설정을 적용하고 있어서
const notoSansKr = Noto_Sans_KR({ subsets: ['latin-ext'], style: ['normal'], weight: ['400', '500', '600', '700'], display: 'swap', fallback: ['system-ui', 'arial'], }); ... <body className={notoSansKr.className}> ... </body>
처음에는 MUI의 createTheme과 ThemeProvider를 layout.tsx 파일에 적용해줬다.
하지만 MUI는 CSR 환경에서 사용되기 때문에 오류가 발생해서 따로 Provider 파일을 생성해 넣어줬다.
해결 방법
우선 NotoSansKR의 ttf를 다운받아 /public 폴더에 넣어줬다. (Google Font 다운로드)
그 후, global.scss 파일에 font-face를 설정해줌 (layout.tsx에서 사용 중)
global.scss (사용할 굵기만 넣어줘도 됨)
@font-face { font-family: 'Noto Sans KR'; src: url(../../public/fonts/NotoSansKR-Regular.ttf); font-weight: 400; } @font-face { font-family: 'Noto Sans KR'; src: url(../../public/fonts/NotoSansKR-Medium.ttf); font-weight: 500; } @font-face { font-family: 'Noto Sans KR'; src: url(../../public/fonts/NotoSansKR-SemiBold.ttf); font-weight: 600; } @font-face { font-family: 'Noto Sans KR'; src: url(../../public/fonts/NotoSansKR-Bold.ttf); font-weight: 700; }
ThemeRegistry.tsx
'use client'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; const theme = createTheme({ typography: { fontFamily: ['Noto Sans KR', 'Arial', 'sans-serif'].join(', '), }, }); export default function ThemeRegistry({ children, }: { children: React.ReactNode; }) { return ( <ThemeProvider theme={theme}> <CssBaseline /> {children} </ThemeProvider> ); }
이렇게 설정해준 후 layout.tsx 파일에서 태그로 적용하고 싶은 범위를 지정해주면 된다!
import '@/styles/global.scss'; ... <body> <ThemeRegistry> // <---- 요기부터 <Header /> <SideBar /> <main>{children}</main> </ThemeRegistry> // <---- 요기까지 </body>
틀리더라도 🌸🌈🌷예쁘게 지적해주세요💕❣️