Font를 Preload하는 방법

웹페이지에 폰트를 적용할 경우, 해당 폰트를 불러오기 위해 HTTP요청이 필요하다.

이 요청으로 페이지 로딩 시간이 길어질 수 있으므로, 폰트의 로딩을 최적화하는 방법이 필요하다.

따라서 오늘은 "Font를 Preload하는 방법" 에 대해 이야기할 예정이다.

 

---

1. 로컬 폰트를 사용할 경우

웹페이지에서 로컬폰트를 사용하는 경우, 폰트가 이미 컴퓨터에 존재하므로 추가적인 HTTP요청없이 바로 적용이 가능하다. 따라서 폰트를 Preload할 필요가 없다. 하지만 해당 폰트를 가지고 있지 않은 사용자의 컴퓨터에서는 적용이 불가하므로, 그를 위한 대체 폰트를 설정해야 한다.

 

2. 웹 폰트를 사용할 경우

웹폰트를 사용하는 경우, 폰트파일을 다운로드하고 렌더링하는 과정에서 시간이 추가적으로 소요된다. 이 경우 preload를 사용해 폰트를 미리 불러와 로딩시간을 최적화할 수 있다.

 

2-1. <link>태그

다음 코드와 같이 link태그로 폰트를 preload할 수 있다.

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

• rel="preload" : preload를 지시하는 속성
• href : preload할 폰트파일의 경로
• as="font" : preload할 리소스의 유형 명시
• type="font/woff2" : preload할 폰트파일의 MIME 타입
• crossorigin : 폰트파일이 CDN서버에 존재하는 경우, 리소스를 CORS요청으로 가져올때 사용하는 속성. 

*CDN서버 = 전세계 여러 지역에 위치한 여러대의 서버가 있다. 사용자가 해당 컨텐츠를 요청하면 그 중 가까운 서버에서 콘텐츠 제공함.

컨텐츠를 빠르고 안정적으로 전송하기 위한 서버 네트워크.

2-2. font-display 속성 

font-display속성을 사용해 폰트의 로딩방식을 제어할 수 있다. 폰트파일을 다운받는 동안 빈 공간에 대체폰트를 표시하거나, 다운로드받지 못한 경우 대체 폰트를 표시하는 등 동작을 설정할 수 있다.

 /*폰트를 정의하기 위한 CSS at-rule*/
@font-face {             
  font-family: 'Example';
  src: url('example.woff2') format('woff2');
  font-display: swap;
}

/*body에 위 폰트 지정. 대체폰트로 sans-serif*/
body {
  font-family: 'Example', sans-serif;
}

font-family: 폰트를 참조하기 위한 이름을 지정

src: 실제 폰트파일의 위치 지정  format(폰트파일 형식)

• auto: 브라우저의 기본값설정. 브라우저마다 다른 로딩방식 사용
• block: 폰트 파일이 다운로드되기 전까지는 적용되지않은 텍스트 표시
• swap: 폰트 파일 다운로드되기전까지 대체폰트(기본폰트 or fallback폰트)로 표시, 폰트 로딩 완료 후 적용.
• fallback: 폰트 파일 로딩되기전 대체할 폰트.
• optional: 브라우저가 필요에 따라 폰트파일을 다운로드하지 않도록 설정. -> 폰트파일의 크기를 파악하여 다운로드할지 여부를 결정함.