Font Preload 이란?
Font Preloading 은 사용자 지정 폰트를 사용하는 웹 페이지의 성능과 로딩 시간을 개선하는 기술입니다.
웹 페이지가 외부 폰트에 의존하는 경우, 브라우저는 텍스트를 올바르게 렌더링하기 위해 해당 폰트를 먼저 다운로드해야 합니다. Font Preloading을 사용하면 특정 폰트가 우선적으로 로드되도록 브라우저에 알려줌으로써 텍스트 렌더링 지연을 줄일 수 있습니다.
Font Preload 적용 방법
1. Html
폰트를 사전로드하기 위해서는 HTML에서 'link' 요소를 사용하고 'rel' 속성을 "preload"로, 'as' 속성을 "font"로 지정해야 합니다.
<link rel="preload" href="/fonts/testfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">위의 코드에서 "폰트 파일 경로"는 실제 폰트 파일의 경로로 대체해야 합니다. 'type' 속성은 폰트 파일 형식을 지정하는데, 위 예시에서는 WOFF2 형식을 사용했습니다. 'crossorigin' 속성은 선택적이며, 폰트 파일이 다른 도메인에 호스팅되어 있는 경우에 사용합니다.
HTML 문서의 <head> 섹션에 폰트 사전로드 코드를 추가함으로써, 브라우저는 해당 폰트가 필요한 텍스트를 만나기 전에 가능한 빨리 폰트 파일을 다운로드하기 시작합니다. 이를 통해 폰트가 필요한 시점에 사용 가능하도록 하여 텍스트 렌더링 지연을 줄일 수 있습니다.
2. CSS
@font-face를 사용하여 웹 페이지에서 사용자 지정 폰트를 로드하는 방법도 있습니다.
@font-face은 CSS를 사용하여 폰트 파일을 브라우저에 로드하고 해당 폰트를 웹 페이지에서 사용할 수 있도록 하는 방법입니다.
<link rel="preload" href="path/to/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<style>
@font-face {
font-family: 'CustomFont';
src: url('path/to/font.woff2') format('woff2'),
url('path/to/font.woff') format('woff');
/* 추가적인 폰트 포맷 지정 가능 */
font-weight: normal;
font-style: normal;
}
body {
font-family: 'CustomFont', sans-serif;
}
</style>위의 CSS 코드에서 @font-face을 사용하여 "CustomFont"라는 폰트 패밀리를 정의합니다.
src 속성에서는 실제 폰트 파일의 경로를 지정하고, format 속성으로 해당 파일의 형식을 명시합니다.
여러 개의 폰트 파일 형식을 지정하여 다양한 브라우저에서 호환성을 보장할 수 있습니다.
그리고 font-weight와 font-style 속성을 사용하여 폰트의 두께와 스타일을 추가로 설정합니다.
이후 body 요소에서 font-family 속성을 사용하여 웹 페이지의 텍스트에 "CustomFont"를 적용합니다.
link 요소를 사용하여 preload를 추가하고, 그 아래에 @font-face와 폰트를 사용하는 CSS 스타일을 정의했습니다. 이렇게 함으로써 브라우저는 폰트 파일을 사전로드하고 @font-face를 통해 폰트를 사용할 수 있게 됩니다.
이 방법을 사용하면 폰트 파일이 먼저 다운로드되어 있으므로, 폰트가 필요한 시점에 바로 사용할 수 있게 됩니다. 이를 통해 텍스트 렌더링 지연을 최소화할 수 있습니다.
다만, preloading 하는 리소스가 많아지면 처음 렌더링 시 속도가 느려질 수 있으므로 현재 페이지에서 중요도가 높아 먼저 렌더링 되어야 하는 요소를 선별하여 사용하는 것이 좋다!
Font 종류 및 최적화 기법
Font를 적용하여 웹 페이지에 렌더링할 때 사용되는 최적화 기법에 설명하기에 앞서 Font를 적용할 때 사용하는 Font의 대표적인 2가지 종류에 대해 설명하고자 한다.
바로 Local Font 와 Web Font 이다.
- Local Font
로컬 폰트는 사용자의 컴퓨터에 이미 설치되어 있는 폰트를 말합니다. 로컬 폰트는 운영 체제에 의해 제공되며, 사용자가 웹 페이지를 방문할 때 브라우저는 이러한 로컬 폰트를 사용하여 텍스트를 렌더링합니다. 로컬 폰트는 빠르게 로딩되며 사용자의 선호도에 따라 다양한 폰트를 사용할 수 있습니다. - Web Font
웹 폰트는 웹 페이지에서 사용되는 글꼴을 브라우저를 통해 인터넷에서 다운로드하는 방식입니다. 이는 웹 페이지 디자이너가 원하는 글꼴을 사용할 수 있도록 합니다. 기본적으로 브라우저는 사용자의 컴퓨터에 설치된 로컬 폰트만 사용할 수 있으나, 웹 폰트를 사용함으로써 웹 페이지에서 특정 글꼴을 보여줄 수 있습니다.
- 로컬폰트 :
추가적인 네트워크 요청 없이 사용자의 시스템에서 이미 설치된 글꼴을 사용할 수 있으므로 웹 폰트에 비해 더 빠르게 텍스트를 렌더링할 수 있다. 그러나 로컬 폰트를 사용하는 경우 사용자가 해당 폰트를 미리 설치해야 하므로, 일관된 글꼴 경험이 보장되지 않을 수 있다.- 웹폰트 :
웹폰트는 개발자가 지정한 웹 폰트를 사용하여 일관된 디자인을 유지하고 특정 폰트를 제어할 수 있어, 사용자에게 일관된 글꼴 경험을 제공한다. 하지만 웹폰트는 사용자에게 폰트 렌더링을 위한 추가적인 네트워크 요청을 요구하게 된다.
Font 적용 시 발생 할 수 있는 이슈
Local Font의 경우 운영체제에서 제공하는 Font를 사용하는 것이다 보니 개발자가 직접적으로 제어할 수 있는 부분이 제한적이다. 그래서 보통 웹 페이지를 개발할 때 Font의 사용은 Local Font를 defalut 값으로 두고 개발자의 의도에 따라 커스터마이징이 유용한 Web Font가 사용된다.
하지만, Web Font의 경우 사용자에게 추가적인 네트워크 요청을 요구하게 되므로, 네트워크 환경이나 브라우저, 운영체제 등에 따라 의도치 않은 이슈가 발생할 수 있어, 이를 방지하기 위한 여러가지 최적화 기법들을 사용해야 한다.
Web Font와 관련된 이슈에 있어서 가장 대표적인 것이 바로 FOIT, FOUT다.
FOIT와 FOUT는 브라우저의 렌더링 방식으로 Web Font가 다운로드 되지 않으면 아예 해당 텍스트의 렌더링을 차단한다.
사이트에 접속을 했을 때 Font가 늦게 뜨거나 혹은 로딩이 늦어져서 나중에서야 적용이 되는 현상이다.
FOIT는 브라우저가 폰트를 다운로드하기 전까지 글자가 보이지 않는 것을 의미하고
FOUT는 브라우저가 폰트를 다운로드하기 전까지 폰트가 적용되지 않는 것을 의미한다.
즉, Web Font 사용으로 로딩과정에서 이슈가 발생한다면
FOIT는 글자 자체가 보이지 않는 것이고 FOUT는 폰트가 적용이 되지 않아 default 값으로 글자가 보이는 것을 말한다.
(FOUT는 IE 계열 브라우저에서 적용되는 렌더링 방식이라 이제는 FOIT 렌더링 방식만 사용된다.)
이와 같은 Font 이슈가 생기는 이유는 브라우저 동작에 있어서 Font 리소스 요청의 경우에는 다른 리소스 요청보다 늦게 처리되기 때문이다.
따라서, 웹 사이트를 구성하는 사이에 폰트 리소스 응답이 늦어버리게 되면 해당 Font 이슈가 발생하게 되는 것이다.
Font 적용 시 최적화 방법
-
Font 파일 용량 줄이기
Web Font는 사용자에게 추가적인 네트워크 요청을 통해 다운로드 되기 때문에 Font 파일의 크기가 크면 Web Font가 적용된 글자가 렌더링 될 때까지의 시간에 차이가 생긴다. 이러한 문제는 Font 파일의 용량을 최적화 하여 해결할 수 있다.
위의 그림에서 알 수 있듯이 woff/woff2 타입의 확장자의 크기가 다른 파일들에 비해 확연히 낮은 것을 알 수 있다. -
Subset Font 이용하기
Subset Font는 Font 파일에서 사용하지 않는 글자를 제거하고 필요한 글자만 남겨둔 Font다. 일반적으로 영어보다 한글이 파일 용량이 크기 때문에 Subset Font를 사용하여 최적화 할 수 있다.
언어 별 전용 Subset Font를 사용할 수도 있고 본인의 의도에 따라 Subset Font를 만들어 사용할 수 있다. -
Preload 사용하기
앞서 설명한 것처럼 Web Font를 사용하기 전에 preload를 통해 Font 파일을 사전에 다운로드할 수 있다. preload를 사용하면 웹 페이지의 다른 리소스와 독립적으로 Font 파일을 다운로드할 수 있으며, 사용자가 실제로 폰트가 필요한 시점에서 이미 다운로드된 Font를 사용할 수 있다. 이를 통해 폰트 로딩 지연을 최소화해 최적화를 할 수 있다.
하지만, preload의 남용은 되려 렌더링 시간을 지연시킬 수 있기 때문에 개발자의 의도에 따라 우선순위가 높은 요소를 선별하여 사용하는 것이 바람직하다.
