Font Preload란?
Font preload는 웹 폰트를 미리 로드하는 방법이다. 이를 통해 웹 페이지의 성능을 향상시킬 수 있다. Font preload 방법에는 여러가지가 있다. HTML 문서의 head tag에 preload 링크를 추가하거나 CSS에서 font-face를 사용할 때, font-display 속성을 사용해 폰트를 표시하는 방법을 선택할 수 있다.
Font Preload를 사용했을 때의 장점.
앞서 말했듯이 Font preload를 사용하면 웹 페이지의 성능을 향상시킬 수 있다. Font preload를 사용하면 웹 페이지가 로드될 때 웹 폰트를 미리 로드할 수 있어서 FOUT(Flash of Unstyled Text)을 방지할 수 있다. 또한, 폰트 파일이 큰 경우에는 폰트 파일을 미리 로드하지 않으면 웹 페이지가 로드되는 동안 폰트 파일을 다운로드하는 시간이 추가로 소요될 수 있다. 이를 통해 웹 페이지의 성능을 향상시킬 수 있다.
FOUT(Flash of Unstyled Text)란?
FOUT는 Flash Of Unstyled Text의 약자로, 웹 페이지에서 폰트가 로드되기 전에 텍스트가 먼저 표시되는 현상을 말합니다. 이는 사용자 경험을 저하시키고, 페이지의 디자인을 깨뜨릴 수 있습니다. 이를 방지하기 위해 폰트를 미리 로드하는 font preload 방법이 사용됩니다. - wikipedia -
Font Preload 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font preload 예제</title>
<link rel="preload" href="zerobase-font.woff2" as="font" type="font/woff2" crossorigin>
<style>
body {
font-family: 'My Font', sans-serif;
}
</style>
</head>
<body>
<h1>Font preload 예제</h1>
<p>제로베이스</p>
</body>
</html>위 예제에서는 my-font.woff2 폰트 파일을 미리 로드하고 있다. 이를 위해 태그에 rel="preload" 속성을 추가하고, as="font"와 type="font/woff2" 속성을 지정한다. 이렇게 하면 폰트 파일이 로드되기 전에 텍스트가 먼저 표시되는 FOUT 현상을 방지하고 웹 성능을 향상시킬 수 있다.
마무리하며
블로그 글을 쓰며 font를 preload하여 사전에 불러와 페이지에 표시될 때 폰트 파일의 다운로드 시간과 렌더링 시간을 줄이는 효과를 얻을 수 있다는 것을 제대로 공부하고 기억하였다. 프론트엔드 개발자로써 font preload는 웹 페이지 성능을 개선할 수 있고, FOUT현상을 방지할 수 있는 중요한 방법이라는 것을 기억할 것이다.
