먼저 Font Preload에 대해 들어가기 앞서, 로컬 퐅트와 웹 폰트에 알아보려 한다.
📌 로컬 폰트? 웹 폰트?
로컬 폰트
로컬 폰트는 사용자의 컴퓨터에 미리 설치되어 있는 폰트를 말한다. 폰트 파일을 다운로드할 필요가 없어 웹 페이지의 로딩 속도가 빠르다.
웹 폰트
웹 폰트는 웹 페이제에 포함된 폰트 파일을 읽어 사용하는 폰트이다. 방문자의 컴퓨터에 해당 폰트가 설치되어 있지 않아도 웹 브라우저를 통해 다운로드되어 표시할 수 있다. 하지만 라이선스 비용이 들기 때문에 일부 제한히 될 수 있으며, 웹 페이지의 로딩 속도를 늦추는 원인이 될 수 있다.
📌 Font Preload란?
: 웹 페이지 로딩 중에 미리 폰트를 다운로드하여 사용자가 페이지를 볼 때 폰트가 준비되어 있는 상태로 보여지도록 하는 기술이다.
일반적으로 웹 페이지에서 폰트를 사용하며 해당 폰트가 다운로드되기 전까지 텍스트가 디폴트 폰트로 나타난다. 이는 사용자의 경험을 저해할 수 있다. Font Preload는 이러한 문제를 해결하기 위해 웹 페이지 로딩 중에 미리 폰트를 다운로드하여 사용자가 페이지를 볼 때 폰트가 준비되어 있는 상태로 보여지도록 한다. 이를통해 폰트 파일ㅇ르 다운로드하는 시간을 줄이고 페이지으 로딩 속도를 개선할 수 있다.
📍 로컬 폰트 로딩하는 방법
로컬 폰트가 있는 경우 CSS의 @font-face 규칙을 사용하여 사용자의 컴퓨터에 미리 설치되어 있는 폰트 파일의 경로를 지정하여 브라우저가 해당 폰트 파일을 사용하도록 지정하는 방법이 있다.
@font-face {
font-family: "MyFont";
src: local("MyFont"), url("/fonts/myfont.woff2") format("woff2");
}
body {
font-family: "MyFont", "Helvetica Neue", sans-serif;
}local("MyFont")- 브라우저가 로컬 폰트를 검색하도록 지시url()- 폰트 파일의 경로 지정format("woff2")- 폰트 파일의 유형
📍 웹 폰트 로딩하는 방법
웹 폰트를 다운로드 받아 서버에 저장 한 후, 다음과 같은 방법을 사용할 수 있다.
1. HTML <link>
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>rel="preload"- 해당 리소스를 사전 로드할 것임을 명시href- 로드할 폰트 파일의 경로 지정as="font"- 해당 리소스가 폰트 파일임을 명시type="font/woff2"- 폰트 파일의 유형 지정crossorigin- 폰트 파일의 다른 도메인에서 제공되는 경우, CORS 저책을 적용하기 위해 지정
- CSS
@font-face규칙 이용
웨
@font-face {
font-family: 'MyFont';
src: url('/fonts/MyFont.woff2') format('woff2'),
url('/fonts/MyFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}src- 폰트 파일 경로 지정format- 폰트 파일 형식 지정font-family,font-weight,font-style속성을 폰트 스타일 설정
📍 로컬 폰트 최적화 기법
- 필요한 폰트만 로드하기
- 필요한 폰트만 로드하도록 CSS 작성
- 폰트 형식을 최소화 한다. 불필요한 글꼴 포맷(예: .ttf, .svg)은 제외하고 필요한 포멧만 사용한다.
- 폰트 크기 최적화 하기
폰트 파일의 크기가 커지면 페이지 로드 속도가 느려질 수 있다.- gzip, WOFF2 포맿을 사용해 글꼴 파일의 압출률을 높인다.
- 사용하지 않는 글꼴 가중치를 제거한다.
- 폰트 파일을 최적화된 포맷으로 변환한다. (ex. WOFF2)
- 캐싱 활용하기
- Cache-Contol 헤더를 설정하여 브라우저 캐시를 활용한다
- 캐시 가능한 글꼴 파일은 캐시한다.
- FOIT 방지하기
로컬 폰트를 사용할 때, FOIT(Flash of Invisible Text) 문제가 발생할 수 있다. 이를 방지하기 위해 다음과 같은 방법을 사용할 수 있다.font-display속성을 사용하여 로딩 도중 폰트가 없을 때 대체 텍스트를 표시 한다.- 적절한 fallback font를 사용한다.
📍 웹 폰트 최적화 기법
- 파일 용량 최적화
폰트 파일을 최적화된 포맷으로 변환한다. (ex. WOFF2) - 로딩 시간 최적화
- CDN(Content Delivery Network)를 사용한다
- CSS의
@font-face규칙에서font-dispaly속성을 설정하여 다운로드가 완료되기 전에 fallback 폰트를 보여줄 수 있다.
- 서브셋 사용
사용자가 필요로 하는 글자 집합만 포함한 웹 폰트 서브셋(subset)을 만들어 사용할 수 있다. 이렇게 하면 웹 폰트의 용량을 줄일 수 있어 로딩 시간을 단축할 수 있다. - 폴리필 사용
일부 오래된 브라우저에서는@font-face규칙을 지원하지 않을 수 있다. 이런 경우를 대비하여 웹 폰트를 사용하는 폴리필(polyfill)을 사용하여 모든 브라우제서 일관된 폰트 겸험을 제공할 수 있다.
참고
ChatGPT
https://blog.naver.com/codebori/223067862492
