React ttf(글꼴체) 적용하기

시작

https://noonnu.cc/

눈누

저는 이 사이트에서 필요한 글꼴체를 찾았습니다.

마음에 드는 글꼴을 다운받으면 됩니다.

 

React에 적용하기

제 프로젝트는 이런식으로 구성되어있는데 src폴더 안에 font라는 폴더를 새로 하나 생성해서 그 안에 다운받은 ttf파일을 넣어줍니다.

 

그 후 font폴더든 어디든 저는 Font.css라는 파일을 새로 만들었습니다.

 

@font-face {
    font-family: "Font";	//이름
    src: url("./font/PuradakGentleGothic.ttf");		//ttf파일 경로
  }

font-family는 src가 담고있는 font의 이름이라고 생각하시면 됩니다.

 

import "../../Font.css"

그 후 사용하고자 하는 파일에 import를 해줍니다.

 

const Title = styled.span`

font-family : "Font";

`

font-family에 적용해주면 됩니다.