반응형
1. GOOGLE FONT 사이트에 가서 원하는 폰트를 찾는다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
2. pages/index.js <head> 태그 내에 아래의 <link> 태그를 입력한다.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=적용할 폰트 이름" rel="stylesheet">
예를 들어, Noto Sans KR의 경우 아래와 같다.
<Head>
...
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet" />
</Head>
3. css에서 font-family에 해당 폰트를 적용한다.
.css-selector {
font-family: '폰트 이름', serif;
}
예를 들어, mui theme에 global에게 적용할 경우 아래와 같다.
let theme = createMuiTheme({
typography: {
fontFamily: `"Noto Sans CJK KR", sans-serif`,
},
palette: {
primary: {
main: "#4A97FF"
},
secondary: {
main: "#343A40"
}
},
})반응형
'프로그래밍 > web' 카테고리의 다른 글
| npm 특정 버전의 모듈을 설치하는 방법 (0) | 2021.12.07 |
|---|---|
| Next.js getInitialProps 제대로 알고 사용하기 (0) | 2021.07.07 |
| Nextjs 환경 변수 (environment variable)를 server와 client에 모두 적용하는 방법 (0) | 2021.06.28 |
| Next.js - _app.js, _document.js, _error.js에 대해 알아보자 (0) | 2021.06.17 |
| XHR? AJAX? 정확한 의미를 알아보자. (0) | 2021.06.16 |
댓글