웹폰트 - FOUT (Flash of Unstyled Text) 문제

FOUT ?

• 웹폰트가 로드될때까지 시스템의 기본 폰트를 보여주고 이후 reflow 해서 글꼴을 대체하는 방식

작업 중에 계속 FOUT 현상이 발생하여 사용자 경험을 저하시켰다. 이 문제를 해결하기 위해 link 태그에

rel="preload" 속성을 사용해서 font를 미리 가져오는 방법을 취해봤지만 해결하지 못했다. 계속 방법을 찾던 중

webfontloader 라이브러리를 발견했다.  이 라이브러리를 통해서 가장 최우선으로 폰트를 먼저 로드할 수 있게 해준다. 

 

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>