리액트 - 폰트 지정하는 방법

 

Google Fonts 사이트에 들어가서 지정할 폰트를 고른 후에 Get embeded code를 입력하여 장바구니에 들어가고 나서

장바구니에서 사용할 폰트를 적용시켜줍니다.

 

1. nanum pen script 와 black hans sans 글꼴을 지정해 줍니다. 이때 장바구니에서 web을 들어가서 코드를 복사하여 각각 붙여줍니다.

css의 경우 css 파일을 디렉터리 내부에 지정하여 작성해 줍니다. 

 

font.css

@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nanum+Pen+Script&display=swap");

.nanum-pen-script-regular {
  font-family: "Nanum Pen Script", cursive;
  font-weight: 400;
  font-style: normal;
}
.black-han-sans-regular {
  font-family: "Black Han Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

index. css

@import "./css/fonts.css";
@import "./css/tailwind.css";

 

App.tsx

export default function App() {
  return (
    <>
      <h1 className="nanum-pen-script-regular">Hello world!</h1>
      <p className="Black Han Sans">Hello, text!</p>
    </>
  );
}

[스나이퍼 팩토리 2기 과정]

본 학습 자료 및 코드는 수코딩님의 자료를 이용하였습니다. [수코딩(https://www.sucoding.kr)] 출처