[ 프로젝트 ] font 적용법

디자인을 하면서 두가지 폰트를 추천받았다.
하나는 Montserrat, 나머지 하나는 Noto-Sans KR (대성님 감사합니다👍)

대성님의 React Native 프로젝트의 코드 구조를 구경하면서 폰트 폴더가 따로 있다는 것을 어깨너머로 배웠다.
따라서, 폰트를 다운로드 받아서 이를 적용시킬 수 있는 방법이 있다는 것을 알게 되었다.

구글링 하니 방법이 나왔다.

우선 요로코롬 폰트를 다운로드 받는다.

필요한 폰트 이외에는 싹 걷어내었다.

이후 @font-face를 이용해서 각 상황에 맞게 폰트를 설정한다.

/*
  Montserrat
 */
@font-face {
  font-family: "Montserrat";
  src: url('./font/Montserrat/Montserrat-Medium.ttf'
  ); 
}

@font-face {
  font-family: "Montserrat";
  src: url('./font/Montserrat/Montserrat-Bold.ttf'
  );
  font-weight: bold;
}

@font-face {
  font-family: "Montserrat";
  src: url('./font/Montserrat/Montserrat-Light.ttf'
  );
  font-weight: lighter;
}


/* 
  Noto Sans KR 
*/

@font-face {
  font-family: "Noto-Sans";
  src: url('./font/Noto_Sans_KR/NotoSansKR-Medium.otf')
}

@font-face {
  font-family: "Noto-Sans";
  src: url('./font/Noto_Sans_KR/NotoSansKR-Bold.otf');
  font-weight:bold;
}

@font-face {
  font-family: "Noto-Sans";
  src: url('./font/Noto_Sans_KR/NotoSansKR-Light.otf');
  font-weight:lighter;
}

body {
    padding: 0;
    margin: 0 ;
    font-family: "Montserrat","Noto-Sans";
    letter-spacing: 2px;
}

이런 식으로 하면 폰트가 적용된 것을 볼 수 있으며, 미리 정해놓은
bold,light 속성들도 이용할 수 있다.

EZ