[React] Font 적용

짱구짱·2022년 12월 28일
0

React 개발기

목록 보기
1/1

개요

처음 프로젝트를 진행할 때는 기본 폰트를 사용하였는데, OS 환경이나 브라우저에 따라 폰트가 다르게 적용되는 것을 알게 되었다.
화면의 통일성을 위하여 폰트를 적용하기로 하였다.

적용 방식

https://noonnu.cc/
눈누라는 사이트인데, 다양한 폰트들을 확인할 수 있다.
무료, 유료 폰트가 있으며, 라이센스 적용 방식 확인 및 폰트 테스트도 바로 할 수 있어서 편리한 것 같다.
마음에 드는 폰트를 찾아서 다운로드 받기!

적용 폰트

https://cactus.tistory.com/306

나는 프리텐다드 폰트가 깔끔하고 가장 무난하게 예쁜 것 같아서 선택했다.

참고로 내가 다운 받은 폰트가 ttf 포맷이여서 otf와 woff 포맷으로 변경해줬다.
폰트 포맷 변경은 아래 사이트에서 가능하다!
https://cloudconvert.com/ttf-to-otf

프로젝트에 적용하기

프로젝트 구조

src/
    └── static/
        └── fonts/
        	├── font.css
            ├── Pretendard-Regular.otf
            ├── Pretendard-Regular.woff
            ├── Pretendard-Light.otf
            └── Pretendard-Light.woff

폰트를 굵기 별로 다 다운받아서 src/static/fonts 디렉토리에 저장했다.
otf와 woff 폰트만 저장했다.

font.css

@font-face {
  font-family: "Pretendard";
  font-display: fallback;

  src:
    url("./Pretendard-Regular.otf") format("opentype"),
    url("./Pretendard-Regular.woff") format("woff");
    url("./Pretendard-Refular.ttf") format("truetype");
    
  /* 사용할 폰트의 기본 스타일 */
  font-weight: 400;
  font-style: normal;
}

참고로 format은 폰트의 포맷에 따라 달라진다.

TTF, OTF, WOFF 차이

가장 많이 쓰이는 폰트의 포맷으로는 3가지가 있다.

  1. TTF
    True Type Font
  • 구형 브라우저 버전과 모바일에서 사용가능
  • 윈도우와 맥에서 가장 오랫동안 사용되고 있음
  1. OTF
    Open Type Font
  • TTF의 개선판
  • 다양한 운영체제에서 지원되고 있으며 멀티 플랫폼을 지원하는 오픈 포맷
  1. WOFF
    Web Open Font Format
  • 대부분 최신 브라우저에서 지원

폰트가 잘 적용됐는지 확인하기

나 같은 경우엔 기본 폰트와 내가 적용하고자 하는 폰트가 비슷해서 제대로 적용되는지 눈으로 확인하기에 어려움이 있었다.

개발자 모드(F12)를 키고 왼쪽 상단 아이콘을 클릭해주면 된다.

웹 화면에서 확인하고 싶은 요소에 마우스를 올려보면 그 요소에 적용된 폰트를 확인할 수 있다.

마치며

폰트 적용은 프로젝트를 진행하다보면, 꼭 한 번은 하게 되는 작업이기에 정리해봤다.

폰트의 포맷이 여러 종류가 있는건 알았지만 정확한 차이는 제대로 몰랐는데, 이번 기회에 정리할 수 있었다.

profile
로봇 스타트업 3년차 프론트엔드 개발자

0개의 댓글