Font 파일을 로딩하는 방법과 최적화 기법

웹 페이지에서 폰트를 사용할 때, 폰트 파일을 로딩하는 방법과 최적화 기법을 이용하여 로딩 속도를 개선해보자

 

1. 로컬 폰트 사용하기

로컬에 설치된 폰트를 사용할 경우, 폰트를 다운로드할 필요 없이 로컬에서 빠르게 로딩할 수 있다. 이를 이용하기 위해 CSS @font-face 를 사용하여 로컬 폰트를 불러올 수 있다.

 

로컬 폰트를 사용하는 CSS 코드의 예시

@font-face {
  font-family: 'Nanum Gothic';
  src: local('Nanum Gothic'), local('NanumGothic'), url('NanumGothic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

위 코드에서 local() 함수는 로컬 폰트를 참조하며, url() 함수는 웹 폰트 파일의 경로를 지정한다.

이렇게 로컬 폰트를 사용하면 웹 폰트를 다운로드할 필요 없이 빠르게 로딩할 수 있다.

 

2. 웹 폰트 Preloading

 

웹 폰트 파일이 크고 로딩 시간이 긴 경우, Preloading을 이용하여 로딩 시간을 줄일 수 있다. Preloading은 브라우저가 폰트 파일을 백그라운드에서 미리 다운로드하여, 폰트가 필요한 시점에 빠르게 로딩할 수 있도록 하는 방법이다.

웹 폰트 Preloading을 사용하는 HTML 코드의 예시

<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"></noscript>

위 코드에서 rel="preload" 속성을 이용하여 웹 폰트 파일을 미리 다운로드하고, as="style" 속성을 이용하여 스타일 시트로 다운로드하도록 설정한다. onload 이벤트 핸들러를 이용하여 Preloading이 완료되면 스타일 시트를 로딩한다.

 

3. Subset 폰트 사용

Subset 폰트는 전체 폰트 파일이 아닌, 필요한 글자만 포함된 파일로 웹 페이지에서 필요한 글자만 다운로드하여 로딩 속도를 개선할 수 있다. 이를 이용하기 위해 Google Fonts에서 제공하는 Subset 폰트 기능을 이용하거나, 서드파티 Subset 폰트 생성 도구를 이용하여 Subset 폰트를 생성할 수 있다.

 

4. 폰트 파일 최적화

 

웹 폰트 파일이 크기 때문에 로딩 시간이 오래 걸릴 수 있다. 이를 해결하기 위해 다음과 같은 최적화 기법을 이용할 수 있다.

• Gzip 압축: 웹 서버에서 Gzip 압축을 사용하여 웹 폰트 파일을 압축하면 파일 크기를 줄일 수 있다.
• WOFF2 포맷 사용: WOFF2 포맷은 웹 폰트 파일을 압축하고 더 작은 크기로 저장할 수 있다. 따라서, WOFF2 포맷을 사용하면 로딩 속도를 개선할 수 있다.
• Subset 폰트 사용: Subset 폰트는 필요한 글자만 포함된 파일로, 전체 폰트 파일보다 작은 크기로 저장할 수 있다.
• 폰트 파일의 캐시 유지: 브라우저는 폰트 파일을 다운로드한 후 캐시에 저장합니다. 따라서, 폰트 파일의 캐시 유지 기간을 설정하면 다음에 같은 폰트를 사용할 때는 캐시된 파일을 사용하므로 로딩 속도를 개선할 수 있다.

이러한 최적화 기법을 이용하여 폰트 파일을 로딩할 때, Gzip 압축이나 WOFF2 포맷 사용, Subset 폰트 사용, 폰트 파일의 캐시 유지 등을 고려하여 최적화된 폰트 파일을 사용하면 로딩 속도를 개선할 수 있다.