FOIT and FOUT

• Flash of Invisible Text (FOIT) FOIT는 웹 폰트가 로드되는 동안 텍스트가 전혀 보이지 않는 현상을 말합니다. 이 기간 동안 사용자는 화면에 아무것도 표시되지 않는 것을 보게 됩니다. 웹 폰트가 로드되기 전까지는 텍스트가 완전히 숨겨져 있기 때문에, 폰트 로딩에 시간이 많이 걸릴 경우 사용자 경험이 저하될 수 있습니다. 이러한 현상은 보통 font-display 속성이 block으로 설정되었을 때 발생합니다. 이 설정은 폰트가 로드될 때까지 텍스트 렌더링을 차단합니다.

• Flash of Unstyled Text (FOUT) FOUT는 웹 폰트가 로드되기 전에, 웹 페이지가 시스템 폰트나 기본 폰트로 먼저 텍스트를 표시한 다음, 웹 폰트가 로드되면 해당 폰트로 전환되는 현상을 말합니다. 이 과정에서 잠시 동안 스타일이 적용되지 않은 텍스트가 보이게 됩니다. FOUT는 사용자에게 텍스트 내용을 즉각적으로 제공하지만, 폰트가 변경되면서 페이지의 시각적 플래시가 발생할 수 있어, 이는 일부 사용자에게 혼란을 줄 수 있습니다. font-display: swap; 속성을 사용하면 이러한 현상을 관리할 수 있습니다. 이 속성은 웹 폰트가 로드될 때까지 대체 폰트를 사용하도록 합니다.

• FOIT와 FOUT 관리 font-display 속성: 이 CSS 속성을 사용하여 웹 폰트의 로딩과 렌더링 방식을 제어할 수 있습니다. swap, fallback, optional 등의 값을 통해 FOIT와 FOUT의 영향을 줄일 수 있습니다. 폰트 로딩 전략: 웹 폰트 로딩에는 다양한 JavaScript 라이브러리(예: Web Font Loader)와 기술이 있어, FOIT나 FOUT 현상을 최소화하면서 폰트를 효율적으로 로드할 수 있습니다. 프리로드: <link rel="preload"> 태그를 사용해 중요한 웹 폰트를 미리 로드함으로써, FOIT와 FOUT의 영향을 줄일 수 있습니다.

font-display 속성

/* Keyword values */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

• auto: 사용자 에이전트가 정의합니다.
• block: 브라우저가 글꼴을 로드할 때까지 텍스트 렌더링을 차단합니다.
• swap: 브라우저가 글꼴을 로드할 때까지 시스템 글꼴을 사용하도록 합니다.
• fallback: 100ms 동안 글자를 숨기고, 3초 이내에 글꼴이 로드되면 웹 글꼴을 적용한다. 만약 3초(swap 기간) 동안 글꼴이 로드되지 않으면 시스템 글꼴을 사용한다
• optional: fallback과 유사하게 동작한다. 그러나 fallback과 다른 점은, 네트워크 상황에 따라 브라우저가 글꼴 다운로드 여부를 결정한다는 점이다. 시스템 글꼴을 유지할지 웹 글꼴을 적용할지 브라우저가 결정한다. 만약 네트워크 상황이 좋지 않으면, 브라우저는 로딩된 웹 폰트를 캐시에 저장하고 시스템 글꼴을 사용한다. 그리고 다음 방문시에 캐시된 웹 폰트를 적용한다. 그래서 이 속성값은 사용자의 네트워크 속도에 따라 웹 폰트를 사용할지 여부를 결정할 수 있다.