폰트가 늦게 뜨는 이유
FOIT, FOUT ?
처음 사이트에 진입했을 때, 글자가 늦게 뜨거나 폰트가 나중에 적용되는 현상이 일어난다.
이 두 현상은 각각 지칭하여 FOIT, FOUT라고 부르는데,
Flash of Invisible Text (FOIT)란, 브라우저가 폰트를 다운로드하기 전까지 글자가 보이지 않는 현상이며,
Flash of Unstyled Text (FOUT)란, 브라우저가 폰트를 다운로드하기 전까지 폰트가 적용되지 않는 현상을 말한다.
브라우저 동작과 웹 폰트
폰트 리소스 요청은 다른 리소스 요청보다 늦게 진행되며,
콘텐츠를 화면에 그리는 동안 폰트 리소스 응답이 늦어지면 FOIT, FOUT가 발생한다.
웹폰트 최적화 방법
pre-loading하기
웹 폰트 파일이 크고 로딩 시간이 긴 경우, Preloading을 이용하여 로딩 시간을 줄일 수 있다. Preloading은 브라우저가 폰트 파일을 백그라운드에서 미리 다운로드하여, 폰트가 필요한 시점에 빠르게 로딩할 수 있도록 하는 방법이다.
<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이 완료되면 스타일 시트를 로딩한다.
주의해야할 점!
일반적으로 브라우저는 현재 페이지에서 필요한 폰트만 다운로드한다.
하지만, preload를 설정하면 현재 페이지에서 사용하지 않더라도 해당 폰트를 우선적으로 로드하게 된다.
만약 많은 양의 폰트를 preload하게 되면 로딩 시간이 길어져, 위 방법의 장점이 없어진다
로컬 폰트 사용하기
@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() 함수는 웹 폰트 파일의 경로를 지정한다.
이렇게 로컬 폰트를 사용하면 웹 폰트를 다운로드할 필요 없이 빠르게 로딩할 수 있다.
Subset 폰트 사용하기
Subset 폰트는 전체 폰트 파일이 아닌, 필요한 글자만 포함된 파일로 웹 페이지에서 필요한 글자만 다운로드하여 로딩 속도를 개선할 수 있다.
이를 이용하기 위해 Google Fonts에서 제공하는 Subset 폰트 기능을 이용하거나, 서드파티 Subset 폰트 생성 도구를 이용하여 Subset 폰트를 생성할 수 있다.
Subset 폰트 만드는 방법
서브셋 폰트 만드는 사이트
사이트로 이동하여 변환을 원하는 폰트를 등록하고, 아래 글자 목록을 characters에 추가하면 된다.
다양한 형식의 폰트 사용하기
웹 폰트는 TTF/OTF, WOFF, WOFF2, SVG, EOT 형식이 있다.
이 중에서 WOFF2, WOFF가 압축률이 좋은데, 기본적으로 폰트를 사용할 때 가장 압축률이 좋은 WOFF2을 쓰고,
지원하지 않는 브라우저에서는 WOFF를 쓰면 된다.
@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형식 사용 */
}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; /* 라틴어만 다운로드 */
}출처
