[Material Design] Material-UI(MUI)로 react & styled component 사용하기 <font>

메테리얼 디자인의 기본 폰트는 Roboto 입니다.

이는 영문 전용 폰트이기 때문에, 따로 한국어 기본 폰트를 지정해줘야 합니다.

https://fonts.google.com/specimen/Roboto

Google Fonts: Roboto

 

00. 한국계 Roboto 기본 폰트

---

https://fonts.google.com/noto/specimen/Noto+Sans+KR 

Google Fonts: Noto Sans Korean

한국어 지원 기본 폰트는 Noto Sans KR 입니다.

 

01. 폰트 지정

---

저는 src/css/font.css 에 폰트들을 지정해줬습니다.

이 중, Noto Sans KR 를 추가했습니다.

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-display: swap;
  src: url(https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap)
    format("woff2");
}

 

 

02. 폰트 테마에 적용

---

현재 Roboto로 지정되어 있는 기본 폰트를 NotoSans KR 로 지정해줍니다.

let theme = createTheme({

...

  typography: {
    fontFamily: "Noto Sans KR",
  },
  
...
  
});

https://mui.com/material-ui/customization/typography/

Typography - Material UI

 

📌 반응형을 위한, font 크기에 대해 기술할 예정입니다.