@ReactJS

1. 원하는 굵기의 폰트를 선택한다.

2. link복사

: link href 어쩌구저쩌구 되어 있는 것(2번)을 복사하여 html 태그 내의 head쪽에 넣는다.

3. CSS 속성 부여

: CSS 파일로 이동하여 3번에 적힌 것을 붙여넣는다.

그렇게 하면 짜라란~ 폰트가 바뀐다.

마크업할 때 사실 폰트만 잘 바꿔줘도 디자인 효과가 확 살아난다.

폰트 마크업을 잘 해보자!

※ 대표 예시

> Noto Sans

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">

font-family: 'Noto Sans KR', sans-serif;

---

@NextJS

1. 원하는 굵기의 폰트를 선택한다.

2. 글씨체를 다운 받는다.(public/static/fonts)

3. style.css 만들기(public/static/fonts)

만든 CSS 파일에 아래와 같이 작성한다.

@font-face {
  font-family: 'Noto';
  src: url('NotoSansKR-Medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

4._app.js에 가져오기

import "../public/static/fonts/style.css";

5. 적용하기

html,
body {
  padding: 0;
  margin: 0;
  font-family: 'Noto',-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}