Font(폰트) Preload 와 최적화

preload 란 무엇이며, 언제 쓰는 속성이고, 왜 써야하는건가?

 

preload는

브라우저가 페이지 로딩 전에 리소스를 미리 다운로드할 수 있도록 해주는 HTML 속성이다.

이를 사용하여 브라우저가 페이지 로딩 전에

폰트, 이미지, 스타일시트, 스크립트 등 다양한 리소스들을 미리 다운로드 해서 페이지 로딩 속도를 개선 할 수 있다.

 

이번 글에서는 폰트를 preload 하는 방법에 대해서 끄적여볼거다.

 

폰트에는 로컬 폰트와 웹 폰트가 있다.

로컬 폰트는 이미 로컬에 설치돼있기 때문에, preload 속성이 필요없지만,

웹 폰트의 경우, 원격으로 가져오며, 아무래도 폰트 파일이 크기가 크다보니

폰트 파일을 다운로드하는 동안 페이지 로딩이 지연되는 경우가 생긴다.

 

이를 해결하기 위해, preload 속성을 사용하여 브라우저가 페이지 로딩 전에 웹 폰트를 미리 다운로드 할 수 있도록 하게 해주는거다.

 

웹 폰트를 preload 해야만 하는 상황이란,

• 웹 폰트 파일의 용량이 크고, 다운로드 속도가 느린 경우
• 페이지 로딩 시간이 길어지는 웹 폰트 파일을 최적화 할 수 없는 경우
• 웹 폰트 파일을 다운로드하는 동안 페이지 로딩이 지연되는 경우

이러한 상황에서 preload 속성을 사용해서 브라우저가 폰트 파일을 미리 다운로드 할 수 있도록 하면,

페이지 로딩 속도를 개선할 수 있다.

 

 

 

 

로컬 폰트와 웹 폰트 둘 다, CSS 파일에서 @font-face를 사용하여 폰트를 로딩할 수 있다.

(단, 웹 폰트는 preload 속성을 HTML에서 작성해야한다.)

 

1.  로컬 폰트 로딩방법

/* CSS */

@font-face {
  font-family: 'LocalFont';
  src: local('LocalFont'), url('fonts/LocalFont.ttf') format('truetype');
}

• local 속성은 로컬에 설치되어 있는 폰트를 사용할 때 사용하는 속성이다.

local 값은 사용자 컴퓨터에 설치되어 있는 폰트 이름을 지정하고,

로컬에 해당 폰트가 없는 경우, 대체 폰트를 사용한다.

 

• url 속성은 원격 서버에서 폰트 파일을 다운로드하여 사용할 때 사용하는 속성이다. url 값은 폰트 파일의 경로를 지정한다.
• format 속성은 폰트 파일의 형식을 지정하는 속성이다.

format 값으로는 truetype, opentype, woff, woff2 등이 있고,

이 값은 브라우저가 해당 폰트 파일을 지원하는지 여부를 확인하는 데 사용된다.

예를 들어,

format('truetype')은 해당 폰트 파일이 TrueType 폰트인 경우에만 사용한다.

브라우저는 이 값으로 지정된 형식의 폰트 파일을 지원하는 경우,

해당 폰트 파일을 로딩하고, 지원하지 않는 경우에는 대체 폰트를 사용한다.

 

 

2.  웹 폰트 로딩방법

/* CSS */

@font-face {
  font-family: 'WebFont';
  src: url('fonts/WebFont.woff2') format('woff2'),
       url('fonts/WebFont.woff') format('woff');
}

<!-- HTML -->

<link rel="preload" as="font" href="fonts/WebFont.woff2" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="fonts/WebFont.woff" type="font/woff" crossorigin>

• rel 속성에 preload를 지정한다.
• as 속성은 브라우저가 파일을 어떻게 처리해야 하는지 지정하는 속성인데, font를 지정하여 폰트 파일을 미리 다운로드 하도록 할 수 있다.
• type 속성에는 폰트 파일의 형식을 지정한다. 
• crossorigin 속성에는 CORS 정책을 적용하도록 지정해준다.

근데 crossorigin이 뭐임?

crossorigin 속성은 CORS(cross-origin resource sharing) 정책을 적용할지를 지정하는 속성이다.

웹 폰트 파일을 다운로드할 때, 해당 폰트 파일이 다른 도메인에서 호스팅되어 있을 경우,

브라우저는 CORS 정책에 따라 폰트 파일을 다운로드 한다.

crossorigin 속성을 anonymous로 지정하면, 브라우저는 다른 도메인에서 호스팅되어 있는 폰트 파일을 다운로드할 때,

요청에 Origin 헤더를 포함하여 보내지 않는다.

이를 통해, 다른 도메인에서 호스팅되어 있는 웹 폰트 파일을 다운로드할 때, 보안상의 문제를 방지할 수 있다.

 

 

 

 

여기까지 preload에 대해서 알아봤고,

이제 폰트 파일 크기를 최적화 할 수 있을 때의 방법을 알아보겠다.

 

웹 폰트 파일은 다른 리소스에 비해 상대적으로 큰 용량을 가지기 때문에, 다운로드 시간이 길어질 수 있으며,

웹 폰트 파일을 다운로드하는 동안 페이지 로딩이 지연될 수 있다.

하지만 폰트 파일의 용량을 줄이는 최적화 작업을 통해, 웹 폰트의 로딩 속도를 개선할 수 있다.

 

대표적인 최적화 기법으로는 서브셋화 와 폰트 디스플레이 속성 사용이 있다.

서브셋화는 폰트 파일에서 사용하지 않는 문자를 제거하여 폰트 파일의 크기를 줄이는 작업이고,

폰트 디스플레이 속성은 폰트 로딩이 완료되기 전에도 요소를 표시할 수 있도록 하는 속성 이다.

 

1.  서브셋화   

서브셋 폰트는

페이지에서 사용하는 문자만 포함된 서브셋 폰트를 생성하여 사용하면,

전체 폰트 파일에서 사용하지 않는 문자를 제거하여 폰트 파일의 크기를 줄일 수 있다.

이렇게 줄어든 폰트 파일을 사용하면, 폰트 로딩 속도를 개선할 수 있다.

 

예를 들어, 폰트 파일이 100KB인 경우,

해당 폰트에서 사용하는 문자가 약 10KB라면, 서브셋 폰트를 사용하여 해당 문자만 포함된 폰트 파일을 10KB로 줄일 수 있다.

이 경우엔, 폰트 로딩 시간이 1/10로 줄어들게 되는거다.

 

서브셋 폰트를 생성하는 방법은 다양하다.

대표적인 서브셋 폰트 생성 도구로는 Font Squirrel이 있다.

이 도구에서는 폰트 파일을 업로드하고, 사용할 문자를 선택하여 서브셋 폰트를 생성할 수 있다.

/* CSS */

@font-face {
  font-family: 'SubsetFont';
  src: url('fonts/SubsetFont.woff2') format('woff2');
  unicode-range: U+0020-007E, U+3131-3163;
}

unicode-range 속성을 사용하여 폰트에서 사용할 문자 범위를 지정할 수 있다.

위 예시에서는 ASCII 문자와 한글 음절을 포함한 문자 범위를 지정해줬다.

이외에도, @font-face 규칙에서 다른 속성과 동일하게 font-weight와 font-style 속성도 지정할 수 있다.

 

2.  폰트 디스플레이 속성 사용   

페이지 로딩 중에 웹 폰트를 사용하는 요소에 대해

font-display 속성을 사용하여 폰트가 로딩되기 전에도 요소를 표시할 수 있다.

/* CSS */ 

@font-face {
  font-family: 'WebFont';
  src: url('fonts/WebFont.woff2') format('woff2'),
       url('fonts/WebFont.woff') format('woff');
  font-display: swap;
}

font-display 속성에는 다음과 같은 값을 지정할 수 있다.

• auto: 브라우저의 기본 값으로, 폰트 로딩이 완료될 때까지 폰트가 로딩되지 않은 요소는 빈 공간으로 표시된다.
• block: 폰트 로딩이 완료될 때까지 폰트가 로딩되지 않은 요소는 표시되지 않는다.
• swap: 폰트 로딩이 완료되기 전에는 대체 폰트를 사용하고, 폰트 로딩이 완료되면 대체 폰트에서 웹 폰트로 교체된다.
• fallback: 폰트 로딩이 완료되기 전에는 대체 폰트를 사용하고, 폰트 로딩이 실패하면 웹 폰트를 다운로드 하지 않는다.
• optional: 폰트 로딩이 실패하더라도 페이지가 영향을 받지 않는다.