• Network 패널의 throttle 설정을 ‘Fast 3G’로 설정한 후 메인 페이지를 새로고침하면 아래와 같이 배너에 있는 텍스트가 변하는 것을 볼 수 있음

• 이 현상은 텍스트가 보이는 시점에 폰트 다운로드가 완료되지 않아 생기는 현상임
• Network 패널에서 폰트를 확인해 보면 파일 크기가 750KB이며 다운로드하는 데 4.82초가 걸린 것을 볼 수 있음. 즉, 페이지가 로드되고 대략 5초 후에야 폰트가 제대로 적용된 모습을 볼 수 있다는 것임

• 이 현상은 당연히 사용성에 영향을 줌
• 폰트가 바뀌면서 깜빡이는 모습은 페이지가 느리다는 느낌을 줄 수도 있고 또는 다른 요소를 밀어낼 수도 있음

FOUT, FOIT

• 폰트의 변화로 발생하는 이 현상을 FOUT(Flash of Unstyled Text) 또는 FOIT(Flash of Invisible Text)라고 함

FOUT

• Edge 브라우저에서 폰트를 로드하는 방식, 폰트의 다운로드 여부와 상관없이 먼저 텍스트를 보여준 후 폰트가 다운로드되면 그때 폰트를 적용하는 방식임

FOIT

• 크롬, 사파리, 파이어폭스 등에서 폰트를 로드하는 방식, 폰트가 완전히 다운로드되기 전까지 텍스트 자체를 보여 주지 않음. 그리고 폰트 다운로드가 완료되면 폰트가 적용된 텍스트를 보여줌.
• 하지만 크롬에서 테스트 해 보면 폰트가 제대로 다운로드되지 않았는데도 텍스트가 보임. 완전한 FOIT가 아니라 3초만 기다리는 FOIT 이기 때문임. 즉, 3초 동안은 폰트가 다운로드되기를 기다리다가 3초가 지나도 폰트가 다운로드되지 않으면 기본 폰트로 텍스트를 보여줌. 그런 다음 폰트가 다운로드되면 해당 폰트를 적용함. 그래서 크롬에서 텍스트가 표시되는 과정을 보면 페이지 로드 후, 첫 3초 동안은 텍스트가 보이지 않는 것을 알 수 있음

• 어떤 방식이 더 낫다고 말할 순 없음. 상황에 따라 더 적절한 방법이 있는 것임. 중요한 것은 폰트를 최대한 최적화해서 폰트 적용 시 발생하는 깜빡임 현상을 최소화하는 것임. 폰트 문제는 어떻게 최적화할 수 있을까?

폰트 최적화 방법

• 폰트를 최적화 하는 방법은 크게 두 가지가 있음
  1. 폰트 적용 시점을 제어하는 방법
  2. 폰트 사이즈를 줄이는 방법

폰트 제어 시점 제어하기