브라우저가 폰트를 적용하는 과정을 설명해주세요

먼저, 사용자가 웹 페이지를 요청하면 HTML 문서가 브라우저로 전송됩니다. 브라우저는 이를 파싱하면서 CSS 파일을 로드하고, CSS 내에 @font-face가 있는지를 확인합니다. 이 @font-face를 통해 브라우저는 폰트 파일의 위치와 스타일을 파악하게 됩니다.

다음으로, 브라우저는 @font-face에 명시된 정보에 따라 폰트를 로컬 시스템에서 가져오거나 네트워크 요청을 통해 불러옵니다. 이때, 폰트는 일반적으로 woff나 woff2 같은 형식을 사용합니다. 이 형식이 용량이 작고 압축률이 높아 웹에서 널리 사용됩니다.

폰트가 로드되기 이전에 텍스트가 어떻게 렌더링될지는 CSS 속성 설정에 따라 달라집니다. 만약 font-display 속성이 swap으로 설정되어 있다면, fallback 폰트가 먼저 적용되었다가 폰트가 로드된 후 교체됩니다. 이때 텍스트의 형태가 순간적으로 변하는 "FOUT 현상"이 발생할 수 있습니다. 반면, block으로 설정되어 있다면 웹 폰트가 완전히 로드될 때까지 텍스트가 보이지 않습니다. 이로 인해 폰트가 순간적으로 보이지 않았다가 등장하며 깜빡이는 "FOIT 현상"이 발생할 수 있습니다.

FOUT, FOIT 현상이 일어나지 않도록 할 수 있을까요? 🤔
사전 로딩을 위해 preload 속성을 사용하면(ex. <link rel="preload" as="font">) 브라우저가 폰트 요청을 우선적으로 처리할 수 있습니다. 이를 통해 폰트가 이른 시점에 로드되어 FOUT이나 FOIT이 발생하지 않도록 할 수 있습니다.

또한, font-display: optional을 사용할 수도 있습니다. 이를 사용하면 폰트가 빠르게 로드되지 않을 경우 fallback 폰트를 그대로 유지함으로써 텍스트의 형태가 순간적으로 변화하는 현상을 막을 수 있습니다.