웹 폰트란?

웹 페이지에서 사용되는 폰트를 온라인상에서 다운로드하여 쓸 수 있도록 한 기술

• 이전에는 사용자의 시스템에 설치된 폰트만 사용할 수 있어, 디자인이 제한되었음
• 웹 폰트의 도입으로 웹 페이지를 사용하는 모든 사용자가 동일한 폰트로 일관된 디자인을 경험할 수 있음
• 하지만, 잘못된 방법으로 사용할 경우, 성능을 낮추고, 오히려 사용자 경험을 저해

웹 폰트가 동작하는 방식

1. 브라우저가 HTML을 요청하고, 응답받은 HTML로 DOM 구성
2. 브라우저는 필요한 CSS를 확인하여 요청하고, 응답받은 CSS로 CSSOM 구성
3. 브라우저는 렌더링에 필요한 폰트 요청
4. 브라우저는 폰트 요청의 응답을 기다리지 않고 렌더링 진행(폰트가 준비되지 않았다면 대체 폰트 렌더링하거나 렌더링하지 않음)
5. 브라우저는 폰트가 준비되면 비어있는 텍스트를 채우거나 대체 폰트를 기존 폰트로 다시 렌더링

FOUT과 FOIT

FOUT (Flash of Unstyled Text)

• 브라우저가 폰트를 다운로드하기 전까지 폰트가 적용되지 않는 현상
• 웹폰트가 로드될때까지 시스템의 기본 폰트를 보여주고 이후 reflow 해서 글꼴을 대체하는 방식

FOIT (Flash of Invisible Text)

• 브라우저가 폰트를 다운로드하기 전까지 글자가 보이지 않는 현상
• 웹폰트가 로드될 때까지 텍스트를 렌더링 하지 않다가 로드가 된 이후에 텍스트를 보여주는 동작이다.

FOFT(Flash of Faux Text)