처음 프로젝트를 진행할 때는 기본 폰트를 사용하였는데, 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-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은 폰트의 포맷에 따라 달라진다.
가장 많이 쓰이는 폰트의 포맷으로는 3가지가 있다.
나 같은 경우엔 기본 폰트와 내가 적용하고자 하는 폰트가 비슷해서 제대로 적용되는지 눈으로 확인하기에 어려움이 있었다.
개발자 모드(F12)를 키고 왼쪽 상단 아이콘을 클릭해주면 된다.
웹 화면에서 확인하고 싶은 요소에 마우스를 올려보면 그 요소에 적용된 폰트를 확인할 수 있다.
폰트 적용은 프로젝트를 진행하다보면, 꼭 한 번은 하게 되는 작업이기에 정리해봤다.
폰트의 포맷이 여러 종류가 있는건 알았지만 정확한 차이는 제대로 몰랐는데, 이번 기회에 정리할 수 있었다.