개요

React django로 프로젝트를 하면서 이제 폰트를 적용시키려고 하다.
이전에 했던 방법을 잊어버려서 이번 기회에 다시 작성해본다.

시작

Google Fonts
먼저구글 폰트에 접속을 해서 마음에 드는 폰트를 찾자.

이번에는 Yeon Sung 폰트를 사용해봐야겠다.

우측 상단의 Get Font를 눌러주고

이 창에 들어오며 Get embed code를 선택하자.

이제 여기서 @import를 선택해주고, css내부에 붙여주자.

<style>
	@import url('https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap');
</style>

React코드

return (
    <div className="TestBody">
      <div>
        <h1>기본 폰트 ㄱ 부터 ㅎ font a to z</h1>
        <p>기본 폰트 ㄱ 부터 ㅎ font a to z</p>
      </div>
      <div className='here1'>
        <h1>적용 폰트1 ㄱ 부터 ㅎ font a to z</h1>
        <p>적용 폰트1 ㄱ 부터 ㅎ font a to z</p>
      </div>
      <div className='here2'>
        <h1>적용 폰트2 ㄱ 부터 ㅎ font a to z</h1>
        <p>적용 폰트2 ㄱ 부터 ㅎ font a to z</p>
      </div>
    </div>
  );

/* Yeon Sung 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap');
/* Jua 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');



.here1{
  font-family: "Yeon Sung", system-ui;
  font-weight: 400;
  font-style: normal;
}
.here2{
  font-family: "Jua", sans-serif;
  font-weight: 400;
  font-style: normal;
}

위처럼 사용을 해주니 아래처럼 된다.

굳 이제 잘 이용하자.