FOUT(Flash of Unstyled Text)

웹 페이지를 만들다 보면 폰트가 늦게 적용되어 발생하는 FOUT(Flash of Unstyled Text) 현상이 나타납니다.

 

개발자 도구에서 Fast 4G로 페이지를 로드했을 때 FOUT 현상이 발생했습니다. 사용자들이 처음 진입하여 보게 되는 화면에서 FOUT 현상이 나타나면 텍스트가 깜빡이면서 시각적으로 거슬릴 수 있습니다. 따라서 사용자 경험을 향상시키기 위해 로컬에 저장된 폰트를 프리로딩하고 font-display 속성을 사용하기로 했습니다.

 

현재 페이지에서 중요하게 사용되는 두 가지 폰트를 link 태그를 통해 프리로딩하고, 동시에 font-display 속성값을 swap으로 설정했습니다.

    <link rel="preload" href="/src/assets/fonts/Pretendard_Regular.ttf" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/src/assets/fonts/KIMM_Bold.ttf" as="font" type="font/woff2" crossorigin>

 

@font-face {
  font-family: 'KIMMBold';
  src: url('assets/fonts/KIMM_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('assets/fonts/Pretendard_Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

 

이렇게 적용하니 FOUT 현상이 거의 나타나지 않는 것을 확인할 수 있었습니다.