React 리액트 - 폰트 스타일 적용 방법 [눈누]

 

 

font

 

 

<한글 폰트>

: 상업적 이용 가능한 무료 한글 폰트 사이트

 

https://noonnu.cc

눈누

 

 

 

 

상업적으로 이용 가능한 유료 폰트를 포함해

다양한 무료 폰트를 제공하고 있다

 

 

 

 

다운로드 페이지에서 글꼴을 다운로드해 사용

 

 

 

 

리액트 프로젝트의 resource폴더에 글꼴을 저장하고

웹 프로젝트의 경우 web용으로 사용

 

 

폰트 적용 방법

 

 

 

 

web > static > woff2 

가장 자주 사용하는 포맷으로 적용

 

 

 

 

public > assets > fonts 내에 사용하고자 하는 폰트 파일 넣어주기

 

 

 

 

web > static 폴더의 .css파일에 

웹에 적용하는 방법이 들어 있다

 

 

<styles > global.js>

 // 폰트 적용
  @font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: url(/assets/fonts/pretendard/Pretendard-Black.woff2) format('woff2');
  }

  @font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: url(/assets/fonts/pretendard/Pretendard-ExtraBold.woff2) format('woff2');
  }

  @font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/pretendard/Pretendard-Bold.woff2) format('woff2');
  }

  @font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src:  url(/assets/fonts/pretendard/Pretendard-SemiBold.woff2) format('woff2');
  }

  @font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: url(/assets/fonts/pretendard/Pretendard-Medium.woff2) format('woff2');
  }

  @font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/pretendard/Pretendard-Regular.woff2) format('woff2');
  }

  @font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: url(/assets/fonts/pretendard/Pretendard-Light.woff2) format('woff2');
  }

  @font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-display: swap;
    src: url(/assets/fonts/pretendard/Pretendard-ExtraLight.woff2) format('woff2');
  }

  @font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-display: swap;
    src: url(/assets/fonts/pretendard/Pretendard-Thin.woff2) format('woff2');
  }

`

 

 

- styles > global.js 파일에 폰트 코드 삽입

-> 폰트를 삽입한 경로를 이용해 넣어준다