작성배경
프로젝트 진행하다보면 기본폰트는 OS나 기기별로 달라져서 통일감도 없고 미려함도 반감된다. 그리하여 나는 여러 이쁜폰트를 찾아보다가 Spoqa Han Sans 라는 폰트를 사용하기로 했다. 이를 기억하고 그리 어렵진 않지만 그래도 혹여라도 헤매는 사람들이 있을까 싶어 정리겸 포스팅한다.
두 가지 방법
웹폰트를 적용하는 방법으로는 CDN 을 이용하는 것과, Local에 저장해서 사용하는 방법 두가지로 나뉜다.
- CDN
먼저 Index.html — header 에 아래 와 같이 사용하고 싶은 폰트 주소를 복사해다음과 같이 link — href 에 넣어준다. 아주 간단하다.
하지만 이 방법은 확실히 뷰를 그려주는 속도가 느리다. 그리하여 나는 다음에 설명할 방법을 선택했다.
2. Local 에 저장해서 사용하기
먼저 해당되는 폰트를 내려받아 프로젝트에 fonts 라는 폴더를 만들어 넣어주었다.
그 다음에 css 파일에 아래와 같이 작성해 준다.
— font-family : src — url 에 넣은 폰트 파일을 사용시 입력할 이름
— font-weight : src — url 에 넣은 폰트 파일 사용시 입력할 굵기
— font-style : src — url 에 넣은 폰트 파일을 사용시 입력할 스타일
— src : url 은 인자로 폰트 파일을 받음 & format은 폰트 포맷.
폰트 포맷이 왜 여러개 일까?
아래의 예시와 주석을 살펴보자. 각 브라우저 별로 호환성을 위해 이렇게 포맷이 여러개 존재함을 알 수 있다.
/* IE6-IE8 */
url('../fonts/test.eot?#iefix') format('embedded-opentype')/* Super Modern Browsers */
url('../fonts/test.woff2') format('woff2')/* Modern Browsers */
url('../fonts/test.woff') format('woff')/* Safari, Android, iOS */
url('../fonts/test.ttf') format('truetype'), /* Legacy iOS */
url('../fonts/test.svg#OpenSans') format('svg');
마치며
역시 폰트에 따라 미려함이 달라진다. 곱다 고와! Spoqa Han Sans 의 경우 홈페이지에 아래와 같이 주의 사항이 기재되어 있다.
웹폰트로 사용할 때 CDN방법을 사용하시면 무료로 서브되는 버전이기에 불러오는 속도가 느릴 수 있습니다.
이런 연유로 local에 저장해서 사용해보니 렌더 속도가 확연하게 빨라졌다. 만족스럽다. 만세!
