[ FOUT 해결 ] Font 가 줄바꿈되는 현상이 있음!!

 

[ 현상 ] 

아이폰에서 문구가 자꾸만 줄바꿈 되어 나온다.. 

살짝 터치해주면 다시 정상적으로 나옴.. 

 

 

테스트폰 1 에선 줄바꿈 되어나오는데 

같은 기종 같은 브라우저를 쓰고있는 테스트폰2 에선 정상적으로 나오고 있다. 

 

뭔가 렌더링할때 이슈가 있는거 같아 확인해보니 폰트가 문제였다. 

 

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean');

 

구글링 해보니 FOUT 이라는 현상을 알게되었다. 

웹폰트 적용시 적용하는 폰트가 적용되기전 폰트가 안뜨거나 대체폰트로 보였다가 로딩후 제대로 보이는 현상을 FOUT라고 한다.

 

fontFaceObserver.js 를  통해 처리하는 방법을 찾아 적용해보니 잘된다~ !

 

개선 ㄱㄱ~~ 

 

1. 스크립트 다운로드! 

FONTFACEOBSERVER.JS: DOWNLOAD - CDNPKG

 

2. layout.html 에 스크립트 추가. 

<script src="/resources/js/fontfaceobserver.js"></script>

 

3. 하단에 스크립트 추가! 

<script>
    document.documentElement.classList.add('blocking-time');
    setTimeout(function() {
        document.documentElement.classList.remove('blocking-time');
    }, 400)
    var font = new FontFaceObserver('Noto Sans KR');
    font.load(null, 3000).then(function() {
      document.documentElement.classList.add('fonts-loaded');
    });
</script>

 

 

이 내용에 대해 아주 상세하게 정리된 포스팅이 있다. 

웹폰트 최적화 하기

 

읽어보고 참고하기!!