기본 동작

브라우저는 텍스트를 렌더링하기 위해 필요한 글꼴 리소스를 알기 전 렌더트리를 구성해야 한다. 때문에 글꼴 요청은 다른 중요한 리소스보다 훨씬 늦게 다운로드되고 브라우저는 리소스를 가져올 때까지 텍스트를 렌더링하지 못하도록 차단될 수 있습니다.

1. 브라우저는 HTML 문서를 요청합니다.
2. 브라우저는 HTML 응답을 구문 분석하고 DOM을 구성하기 시작합니다.
3. 브라우저는 CSS, JS 및 기타 리소스를 검색하고 요청을 발송합니다.
4. 브라우저는 모든 CSS 콘텐츠가 수신된 후 CSSOM을 구성하고 이를 DOM 트리와 결합하여 렌더링 트리를 구성합니다.
   • 페이지에서 지정된 텍스트를 렌더링하는 데 필요한 글꼴 변형을 렌더링 트리가 표시한 후 글꼴 요청이 전달됩니다.
5. 브라우저는 레이아웃을 수행하고 콘텐츠를 화면에 그립니다.
   • 글꼴을 아직 사용할 수 없는 경우 브라우저에서 텍스트 픽셀을 렌더링하지 못할 수 있습니다.
   • 글꼴을 사용할 수 있게 되면 브라우저는 텍스트 픽셀을 그립니다.

폰트 최적화 방법

1. 폰트 파일 용량 줄이기

1. WOFF 2.0 형식의 폰트

폰트 형식에서 WOFF형식과 WOFF2.0 형식의 압축된 폰트 형식이다. WOFF2형식이 보다 더 압축된 형식인데 보통 30~ 50% 더 압축된 형식이다.

https://onlinefontconverter.com/

브라우저 지원 범위는 다음과 같다.