폰트의 preload란?
폰트 프리로드는 웹 페이지 성능을 향상시키기 위한 기술로, 실제로 필요한 시점보다 먼저 폰트 파일을 불러와 미리 캐시하는 방법이다.
즉, 프리로드 링크를 사용해 폰트를 불러오면, 폰트 파일이 페이지의 나머지 부분이 로딩되는 동안 백그라운드에서 다운로드 된다.
이 말은, 텍스트 렌더링에 소요되는 시간을 줄여, 폰트가 필요한 시점에 사용자가 다운로드를 기다릴 필요 없이 바로 사용이 가능함을 의미한다.
폰트의 preload 방법
일반적으로, HTML의 link 요소를 이용해 폰트를 preload한다.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>위의 예시에서, 각각의 속성은 다음과 같다:
rel="preload" : 리소스를 프리로드 해야 함을 나타냄.
href="font.woff2" : 폰트 파일의 URL을 지정
as="font" : 프리로드되는 리소스의 유형, 이 예시의 경우 폰트.
type="font/woff2" : 리소스의 MIME 유형
crossorigin : 브라우저에게 요청이 교차 출처인 경우에도 폰트 파일을 가져오도록 허용
다른 방법으로는 CSS의 @font-face를 사용하여 폰트를 정의하고, preload를 통해 프리로드할 수 있다.
아래 예시 첨부:
@font-face {
font-family: 'YourFontFamily';
src: url('your-font.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
/* 프리로드를 위한 스타일시트 */
[rel="stylesheet"][href="your-font.woff2"] {
as: font;
type: font/woff2;
crossorigin;
}
이 CSS 코드에서 @font-face는 폰트를 정의하며, 그 아래의 스타일시트 부분에서 폰트를 프리로드한다.
as, type, crossorigin 속성을 이용하여 프리로드와 관련된 설정을 추가할 수 있다. 관련 설정은 HTML과 같다.
로컬 폰트가 있을 때 로딩 방법
위에 언급한대로 CSS 코드에서 @font-face를 사용해 로컬 폰트를 불러올 수 있다.
@font-face {
font-family: 'Poppins';
src: local('Poppins') url('Poppins.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
웹폰트만 로딩해야하는 상황에서 최적화
앞서 말한 HTML link를 이용한 프리로드를 진행한다.
폰트 파일 최적화 방법
-
웹 폰트를 사용한다. : 특정 폰트가 사용자의 브라우저에서 지원되지 않을 경우 대체할 수 있는 폰트를 지정할 수 있다
-
폰트 서브셋을 사용한다. : 웹 페이지에서 사용되지 않는 글자를 제거하고 폰트 파일 크기를 최소화할 수 있다.
-
폰트 포맷을 WOFF나 WOFF2로 사용한다.
이 외에도 여러 방법들이 있겠지만, 대표적인 방법만 나열했다.
