로컬 폰트 vs 웹 폰트
로컬 폰트는 사용자의 기기에 이미 설치된 폰트를 가리킨다. 웹 페이지가 해당 폰트를 로드할 필요 없이 바로 사용할 수 있다. 반면, 웹 폰트는 웹 서버에서 다운로드되어 사용되는 폰트로, 사용자의 기기에 설치될 필요가 없다.
로컬 폰트는 별도로 다운로드할 필요가 없어 빠른 로딩 속도를 제공하지만, 디자인의 다양성이 제한될 수 있다. 웹 폰트는 다양한 디자인 옵션을 제공하지만, 추가적인 네트워크 요청으로 인해 페이지 로딩 속도를 저하시킬 수 있다.
폰트 프리로딩이란?
폰트 프리로딩은 사용자가 페이지를 요청하기 전에 필요한 폰트 파일을 미리 다운로드하여 렌더링 속도를 향상시키는 방법이다. 이를 통해 페이지가 렌더링된 후 폰트가 늦게 적용되는 등의 문제를 방지하여 사용자 경험을 향상시킬 수 있다.
웹 폰트 최적화 방법
1. Preload 속성 활용
HTML의 <link> 태그에 preload 속성을 사용하여 폰트를 미리 로드하도록 지시할 수 있다. 이는 브라우저에게 폰트 파일을 우선적으로 다운로드하라고 알려 성능을 향상시킨다.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>2. 적절한 포맷 선택
다양한 폰트 포맷을 지원하고, 사용자의 브라우저가 지원하는 최적의 포맷을 선택하는 것이 중요하다. WOFF(2), TTF, EOT 등 다양한 포맷을 고려해야 한다.
3. Subset 사용
필요한 글자만 포함하는 폰트 서브셋을 사용하여 폰트 파일 크기를 최적화할 수 있다. 이는 다운로드 시간을 단축하고 페이지 로딩 속도를 향상시킨다.
@font-face {
font-family: 'YourWebFont';
src: url('your-web-font-subset.woff2') format('woff2');
}4. Font Display 속성 활용
CSS 속성 font-display를 사용하여 폰트가 로드되지 않았을 때의 fallback 폰트를 설정할 수 있다. 이를 통해 폰트가 다운로드되는 동안 화면에 빠르게 보이도록 할 수 있다.
폰트가 다운로드되지 않은 상태에서도 텍스트가 표시되도록 설정할 수 있습니다. 이를 통해 사용자는 글꼴이 완전히 로드될 때까지 기다리지 않고 콘텐츠를 볼 수 있습니다.
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap; /* fallback 폰트로 전환 */
}5. 폰트 딜레이 설정
필요한 폰트가 먼저 렌더링되고, 그 외 폰트들은 사용자가 사이트를 탐색하는 동안 백그라운드에서 로드되도록 할 수 있다.
웹 폰트를 최적화하는 것은 사용자 경험과 성능에 큰 영향을 미친다. 올바른 폰트 프리로딩 전략과 최적화 기법을 활용하면, 웹 페이지의 로딩 시간을 최소화하고, 사용자들에게 빠르고 일관된 사용자 경험을 제공할 수 있다.
(사진 출처: visme.co/blog/modern-fonts/)
