NAVER D2

로컬의 폰트 설치 상황에 상관없이 웹에서 항상 원하는 타이포그래피를 사용할 수 있게 하는 기술. css에서 @font-face 규칙을 이용해 적용한다.

웹 폰트는 CSS 내에서 외부 웹 폰트 링크를 통해 외부에서 받아오게 된다. 따라서 HTML 받아오기 > HTML에 정의되어 있는 CSS 파일 받아오기 > 그 안의 외부 웹 폰트 받아오기 순으로 데이터를 받아오게 되는데, 그만큼 순서가 늦어지므로 이미 DOM과 CSSOM이 만들어져 렌더링되며 Paint 단계에 도달했음에도 불구하고 웹 폰트가 다운로드되어 있지 않은 상황이 생길 수 있다. 아직 해당 자원을 다운로드되지 않았으므로 브라우저는 그 콘텐츠의 렌더링을 차단하므로 웹 폰트가 적용된 요소가 보이지 않을 수 있다. 따라서 웹 폰트의 최적화 문제가 중요해진다.

웹 폰트 최적화

웹 폰트 형식(참고)

EOT

IE에서만 사용하는 웹 폰트 파일 형식이다. IE 버전 8 이하에서 웹 폰트를 사용하기 위해서는 EOT 파일을 마련하여야 한다.

ttf(True Type)와 otf(Open Type) (참고)

일반적으로 많이 사용되는 웹 폰트 파일 형식이다. 둘 다 벡터 형식의 폰트이다. 따라서 픽셀 형식의 폰트와는 다르게 각 점과 점 사이의 정보를 사용하여 구성되기 때문에 깨지지 않는다. ttf은 2차원 배지어 곡선을, otf은 3차원 배지어 곡선을 사용하여 점과 점 사이의 곡선을 계산한다. 만약 사용자가 고해상도의 출력 작업을 해야 한다면 otf를 사용하는 것이 좋겠지만, 그렇지 않다면 ttf를 사용하는 것을 고려해 볼 만하다.

woff와 woff2

기본적으로 웹 폰트를 목적으로 하는 형식이다. ttf와 oft 폰트를 압축한 것이기 때문에 일반적으로 파일 크기가 작으므로 빠르게 다운로드할 수 있다는 장점이 있다.

font-face를 사용하여 폰트 사용하기

여러 유형의 웹 폰트 파일 사용하기

실제로 외부의 폰트를 다운로드 받아 사용하기 위해서는 @font-face CSS 속성을 사용하여야 한다. font-face 안에서 사용할 폰트 파일 형식을 순서에 맞게 배정해주는 것이 무엇보다 중요하다.

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

@font-face {
	font-family: 'Pretendard';
	src: url('fonts/Pretendard.eot') format('eot')
	src: local('Pretendard')
       url('fonts/Pretendard.woff2') format('woff2')
       url('fonts/Pretendard.woff') format('woff')
       url('fonts/Pretendard.ttf') format('ttf')
       url('fonts/Pretendard.otf') format('otf')
}