웹 폰트란

로컬의 폰트 설치 상황에 상관없이 웹에서 항상 원하는 타이포그래피를 사용할 수 있게 하는 기술이다.

기본 사용법

웹 폰트의 문제점

Mitt Romney 기사에서 웹 폰트 로딩 전후 비교

Mitt Romney 기사에서 웹 폰트 로딩 전후 비교

단어 "Not"을 웹 폰트로 지정해서 의미를 강조하려 했지만 웹 폰트의 로딩이 늦어져 "Not"이 없는 상태로 사용자에게 기사가 노출되었다. "Not"이 없이 노출된 시간은 불과 몇 초였지만 원래 의미와 정반대의 내용이 사용자들에게 전달되었다. 이 사건으로 인해 한때 미국에서 웹 폰트가 이슈가 되었다.

웹 폰트 최적화

1. 폰트 파일의 용량 줄이기

다양한 폰트 형식 비교

결론 : woff2.0 - woff - ttf 순으로 적용하면 대부분 브라우저 지원 가능