🧩 로컬 폰트가 있을 때 로딩하는 방법
로컬에 폰트가 있을 경우에는 폰트를 다운로드할 필요 없이 CSS @font-face를 사용하여 로컬에서 빠르게 로딩할 수 있다.
@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()는 웹 폰트 파일의 경로로 지정한다.
🧩 웹 폰트만 로딩해야되는 상황에서의 최적화 기법
브라우저 동작 순서를 살펴보면
1. 브라우저가 HTML 문서를 요청한다
2. HTML 응답이 오면 DOM 구성을 시작하고 CSS, JS 및 기타 리소스를 요청한다.
3. 모든 CSS 컨텐츠를 수신한 뒤, CSSOM을 구성한다. 그 후 CSSOM을 DOM 트리와 결합시켜 렌더링 트리를 구성한다. 그리고 폰트 리소스를 요청한다.
4. 컨텐츠를 화면에 그린다. 이 때, 폰트를 사용할 수 없는 상태라면 브라우저는 글자를 렌더링하지 않을 수도 있으며 폰트 사용이 가능하면 글자를 그린다.
이와 같이, 폰트 리소스 요청은 다른 리소스 요청보다 늦게 시작한다. 그래서 브라우저가 렌더링하는 동안 폰트 리소스 응답이 늦어져서 폰트 적용이 되지 않을 때가 있다. 이 문제를 어떻게 해결할 수 있을까?
📌 Preload
preload를 사용하면 폰트 리소스 요청을 앞당길 수 있다. Preloading은 브라우저가 폰트 파일을 백그라운드에서 미리 다운로드하여, 폰트가 필요한 시점에 빠르게 로딩할 수 있도록 하는 방법이다.
예시)
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" as="font" type="font/woff2" crossorigin>
하지만 preload를 통한 폰트 최적화는 가장 좋은 방법은 아니다.
너무 많은 양의 폰트를 요청하게 되면 로딩 시간이 다시 길어지기 때문에 preload 사용의 의미가 없어지게 된다.
다른 최적화 방법은 없을까?
다음은 다른 여러가지의 최적화 방법을 소개한다.
💡 폰트 파일을 최적화하는 여러가지 방법
- Gzip 압축: 웹 서버에서 Gzip 압축을 사용하여
웹 폰트 파일을 압축하면 파일 크기를 줄일 수 있다. - WOFF2 포맷 사용: WOFF2 포맷은 웹 폰트 파일을 압축하고 더 작은 크기로 저장할 수 있기 때문에 로딩 속도를 개선할 수 있다.
브라우저 호환성을 참고해서 브라우저별로 사용 가능한 폰트 확장자를 확인하여 가장 압축률이 좋은 폰트로 사용하면 되는데, 일반적으로 WOFF, WOFF2가 압축률이 좋다. - Subset 폰트 사용: Subset 폰트는 필요한 글자만 포함된 파일로, 전체 폰트 파일보다 작은 크기로 저장할 수 있다.
- 폰트 파일의 캐시 유지: 브라우저는 폰트 파일을 다운로드한 후 캐시에 저장하기 때문에 폰트 파일의 캐시 유지 기간을 설정하면 다음에 같은 폰트를 사용할 때 캐시된 파일을 사용하여 로딩 속도를 개선할 수 있다.
