Font를 Preload 하는 법

icebear·2024년 1월 31일

📌FOIT / FOUT

Font를 Preload하는법에 들어가기에 앞서 FOIT/FOUT에 대해서 알아보자.

FOIT(Flash of Invisible Text) : 브라우저가 웹 페이지가 로드될 때 웹 폰트가 아직 다운로드 되지 않았기 때문에 일시적으로 텍스트가 화면에 표시되지 않는 현상을 말한다
특히 대체 폰트가 지정되지 않은 경우 브라우저가 폰트를 렌더링하기 위해 다운로드를 기다리는 동안 발생할 수 있다.
FOUT(Flash of Unstyled Text) : 웹 페이지에서 원하는 글꼴이 로드되기 전에 브라우저에서 기본 글꼴로 표시되는 현상을 의미한다.

위와 같은 폰트 이슈가 생기는 이유는 브라우저 동작에 있어서 폰트 리소스 요청의 경우 다른 리소스 요청보다 늦게 처리되기 때문이다.
따라서 웹 사이트를 구성하는 사이에 폰트 리소스 응답이 늦어버리면 위와같은 폰트 이슈가 발생할 수 있다.

📌Font preload란

Preload란 웹 페이지에서 사용될 리소스를 미리 가져오는 기술이다

웹 페이지가 로드되기 전에 필요한 리소스들을 미리 다운로드하여 사용자가 페이지를 더 빠르게 볼 수 있도록 돕는 역활을 한다

Font를 Preload하는 이유❗
각 사이트별로 들어가서 보면 font가 다 다른것을 볼수있다 폰트는 크게 두 가지로 Local Font와 Web Font가 있는데 Web Font는 Local Font보다 느리다 왜냐하면 Local Font는 사용자의 기기에 이미 다운로드되어 있는 Font File을 사용하기 떄문에, 로딩자체의 속도가 빠르기 때문이다.
폰트 파일의 용량이 크고 인터넷 연결이 느린 경우에는 폰트 다운로드에 많은 시간이 소요될 수 있다.
이로 인해 웹 페이지의 로딩 속도가 느려지며, 사용자는 긴 대기 시간으로 인해 불편을 느낄 수 있다.
이러한 단점을 개선해주기 위해 Preload를 사용하면 웹 페이지가 로드되기 전에 폰트 파일을 미리 다운로드를 하고 이를 통해 웹 페이지 로딩 시간을 단축하고 사용자들의 경험을 개선할 수 있다

📌 웹 폰트를 Preload 하는법

Preload 링크 태그

<link rel="preload" href="path/to/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

href : 폰트 파일의 경로
as : 로드할 리소스의 종류 지정 (예: 폰트의 경우, as="font" 를 사용)
type : 리소스의 MIME 타입을 지정 (예: WOFF2 폰트의 경우 type=font/woff2" 를 사용)
crossorigin : 폰트 리소스가 다른 도메인에서 제공되는 경우 필요

폰트 서브셋
폰트 전체 세트 대신 일부 필요한 문자 속성만 포함하는 서브셋을 사용할 수 있다. 예를 들면, 구글 폰트에서 웹 폰트를 로드할 때 폰트 굵기가 10단계로 나누어진 전체 세트를 로드하는 것이 아니라, 웹 페이지에서 사용되는 일부 속성만(예: font-weight값이 400) 로드하도록 설정하는 것이다. 글자의 굵기 뿐만 아니라 언어의 종류, 일부 문자, 그외 다양한 글자 스타일에 대해 일부분만 부분적으로 나누어 포함할 수 있다.
font-display 옵션 사용
CSS의 font-display 속성을 이용하여 폰트 로딩 동안의 텍스트 표시 방법을 제어할 수 있다. 예를 들어 swap 옵션은 폰트 로딩 동안 시스템 폰트를 사용하고, 로딩이 완료되면 지정한 웹 폰트로 전환시킨다. 웹 폰트가 로드되기전 텍스트 컨텐츠가 전혀 표시되지 않는 현상인 FOIT을 완화시키는데는 효과가 있지만, 사용자에게 '깜빡임'현상을 주는 FOUT현상은 해결하지 못한다.

📌로컬 폰트 폰트를 Preload 하는법

로컬에 설치된 폰트를 사용할 경우, 폰트를 다운로드할 필요 없이 로컬에서 빠르게 로딩할 수 있다.

이를 이용하기 위해 CSS @font-face 를 사용하여 로컬 폰트를 불러올 수 있다.

@font-face {
   font-family: 'FontName';
   src: url('fontname.eot'); /* IE9 Compat Modes */
   src: url('fontname.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fontname.woff2') format('woff2'), /* Super Modern Browsers */
        url('fontname.woff') format('woff'), /* Modern Browsers */
        url('fontname.ttf') format('truetype'), /* Safari, Android, iOS */
        url('fontname.svg#svgFontName') format('svg'); /* Legacy iOS */
   font-weight: normal;
   font-style: normal;
}

위 코드에서는 폰트 이름, 폰트 파일의 경로 및 형식, 폰트 굵기 및 스타일을 지정한다.

폰트 파일은 로컬 또는 원격 서버에 위치할 수 있다.
그리고 다음과 같이 폰트를 사용할 수 있다.

body {
    font-family: 'FontName', sans-serif;
}

위 예제에서 'FontName'은 @font-face 블록에서 정의된 폰트 이름이다.
해당 폰트가 사용 가능하지 않은 경우에는 대체 폰트 (sans-serif)를 사용한다.

📌웹 폰트만 로딩시 최적화 방법

Preload를 이용한 폰트 리소스 우선적으로 로드하기
브라우저 동작에 있어서 폰트 리소스 요청의 경우에는 다른 리소스 요청 보다 늦게 실행이 된다.
이러한 이유로 폰트 이슈가 생기는 것이기 때문에 폰트 리소스를 앞당기는 폰트 최적화 방법이 존재한다.

<link rel="preload" href="url" as="font" type="font/woff2" crossorigin />

해당 코드를 HTML의 head에 작성해주고 적용하면 브라우저는 가장 마지막에 리소스하는 폰트리소스를 가장 우선적으로 로드하게 된다 다만 이 방식의 단점은 많은 양의 폰트를 리소스 하게 되면 preload 적용 전과 같이 로딩 시간이 다시 길어지게 좋지 않다 따라서 상황에 맞게 폰트 최적화를 해야한다

압축률 좋은 웹 폰트 확장자 사용
이 방법은 폰트의 용량을 줄여서 폰트 로딩시간을 줄이는 방법이다

웹 폰트 확장자❗

WOFF2 (Web Open Font Format 2): WOFF2는 현재 가장 인기있는 웹 폰트 형식 중 하나이다. WOFF2는 이전 버전인 WOFF1보다 약 30-50% 더 압축률이 좋다. 또한 대부분의 브라우저에서 지원된다. 따라서 WOFF2 확장자를 사용하여 웹 폰트를 배포하는 것이 좋다
WOFF (Web Open Font Format): WOFF는 WOFF2보다 덜 압축되지만 여전히 압축률이 높은 웹 폰트 형식이다.대부분의 브라우저에서 지원된다.WOFF2를 사용할 수 없는 경우 WOFF를 대안으로 사용할 수 있다.
TTF/OTF (TrueType/OpenType Font): TTF 및 OTF는 웹 폰트로 사용할 수 있지만, WOFF2 또는 WOFF보다 압축률이 낮다. 또한 모든 브라우저에서 지원되지 않을 수 있다.
그러나 TTF 또는 OTF 확장자를 사용해야하는 경우, Gzip 또는 Brotli와 같은 압축 기술을 사용하여 압축률을 높일 수 있다.

결론적으로 WOFF2를 사용하는 것이 가장 좋다.
WOFF2가 지원되지 않는 브라우저의 경우, WOFF를 대안으로 사용할 수 있다.
그러나 TTF 또는 OTF 확장자를 사용해야하는 경우에도 압축 기술을 사용하여 압축률을 높이는 것이 좋다.

icebear

이전 포스트

크로스 브라우징(Cross Browsing)

다음 포스트