[html/css] 웹폰트 최적화가 필요한 이유와 방법에 대해 알아보기

 

웹폰트 최적화가 필요한 이유

우리가 처음 사이트에 진입했을 때, 글자가 늦게 뜨거나 폰트가 나중에 적용되는 현상이 일어난다.

 

이 두 현상은 각각 지칭하여 FOIT, FOUT라고 부르는데,

Flash of Invisible Text (FOIT)란, 브라우저가 폰트를 다운로드하기 전까지 글자가 보이지 않는 현상이며,

Flash of Unstyled Text (FOUT)란, 브라우저가 폰트를 다운로드하기 전까지 폰트가 적용되지 않는 현상을 말한다.

브라우저가 렌더링 될 때 콘텐츠를 화면에 그리는 동안 폰트 리소스 응답이 늦어지게 되어 발생하게 된다.

 

브라우저 렌더링 알아보기

 

 

 

웹 폰트 최적화 하기 

 

1) Preload

웹 폰트를 사용하는 경우, preload를 사용해 폰트 리소스 요청 시점을 당겨, 최적화를 진행할 수 있다.
하지만, 현재 사용하지 않더라도 preload 설정된 폰트를 우선적으로 모두 로드하게 되기 때문에
(일반적으로 브라우저는 현재 페이지에서 필요한 폰트만 다운로드한다.)
만약 많은 양의 폰트를 preload하게 되면 로딩 시간이 길어지게되는 단점이 있다.

 

HTML의 <link> 요소 사용해서 폰트를 Preload

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

rel="preload": 브라우저에게 리소스를 preload하라는 지시를 제공합니다.
href: preload할 폰트 파일의 경로를 지정합니다.
as="font": preload하는 리소스의 유형을 명시합니다. 여기서는 폰트를 의미합니다.
type="font/woff2": 폰트 파일의 MIME 유형을 명시합니다.
crossorigin: 다른 출처에서 리소스를 로드할 때 교차 출처 요청을 보내는지 여부를 나타냅니다.

 

 

2) 개선된 폰트 형식으로 최적화하기

웹 폰트 용량을 줄여 폰트의 다운로드 시간을 줄일 수도 있다.

웹 폰트는 일반적으로 사용자 기기에서 사용하는 TTF/OTF 외에도 WOFF, WOFF2, SVG, EOT 형식이 있다.
(브라우저별로 지원하는 웹폰트 보기)

이 중에서 WOFF2, WOFF가 압축률이 좋은데, 기본적으로 폰트를 사용할 때 가장 압축률이 좋은 WOFF2을 쓰고 지원하지 않는 브라우저에서는 WOFF를 쓰면 된다.

WOFF : TTF/OTF와 동일하게 동작하고, 압축을 통해 더 작은 크기를 가진 웹폰트 형식으로 W3C에 권장사항으로 등록되어있어 거의 모든 브라우저에서 지원된다.
WOFF2 : WOFF를 Brotli압축알고리즘을 통해 30%-50% 가량 더 작은 크기로 압축한 개선 버전, WOFF에 비해 호환성은 낮다.

 

- 폰트 확장자 변경 사이트 https://cloudconvert.com/ 

 

 

3) 로컬 폰트가 존재하는 경우 이용하기

• 아래 코드는 여러 형식의 폰트를 지정하는 방법이다.
• 로컬 폰트가 이미 시스템에 설치되어 있는 경우,
  웹 페이지가 해당 폰트를 로드하는 대신 사용자의 시스템에서 폰트를 로드할 수 있다.

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto'),                   /* 1. 사용자의 PC에 해당 폰트가 있다면, 이 폰트를 사용 */
    url(woff2-font-path) format('woff2'), /* 2. local에 Roboto가 없다면, woff2 형식 사용 */
    url(woff-font-path) format('woff');   /* 3. woff2 형식을 지원하지 않는다면 woff형식 사용 */
}

 

 

 

4) Subset 폰트 사용하기

Subset 은 웹 폰트 파일에서 필요한 문자 집합만을 선택하여 추출한 폰트파일이다. 
웹페이지 내에서 특수한 경우에 사용되는 경우, 서브셋 폰트를 이용하여 폰트 파일의 크기를 줄일 수 있다.

서브셋 메이커 : https://transfonter.org/

 

 

 

5) unicode-range 속성

만약 서비스가 다국어를 제공한다면, 각 나라별로 필요한 웹폰트만 로드하는 게 좋다.
@font-face에서 unicode-range 속성을 사용하면 나라별로 필요한 폰트만 다운로드할 수 있다.

@font-face {
  font-family: 'korea font';
  font-weight: 400;
  src: local('korea font'),
    url(woff2-foo-font-ko-path) format('woff2'),
    url(woff-foo-font-ko-path) format('woff'),
  unicode-range: U+1100-U+11FF; /* 한글만 다운로드 */
}

@font-face {
  font-family: 'latin font';
  font-weight: 400;
  src: local('latin font'),
    url(woff2-foo-font-path) format('woff2'),
    url(woff-foo-font-path) format('woff'),
  unicode-range: U+000-5FF;    /* 라틴어만 다운로드 */
}

 

 

6) 폰트 로딩 API 활용

new FontFace 나  Web font loader 같은 폰트 로딩 API를 활용해
로딩 상황에 맞게 텍스트를 나타내거나, 폰트 로드 동작을 재정의 할 수 있다.

 

 

 

 

참고

글. 이미지 출처 https://mong-blog.tistory.com/entry/CSSJS-%EC%9B%B9-%ED%8F%B0%ED%8A%B8%EB%A5%BC-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EB%8A%94-5%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%9

https://yozm.wishket.com/magazine/detail/2107/