폰트, 이미지 다운로드 과정과 폰트 확장자 별 압축률, 경량화 폰트 소개
보통 브라우저에 접속하게 되면 모든 html, css, src를 다운 받아 화면에 보여주게 됩니다.
이 과정에서 src, 즉, 폰트와 이미지 같은 것들은 한 번에 보여주는 것은 아닙니다. 이 소스들은 용량이 커서 나중에 보여지게 되는데요. 만약에 이 큰 용량들의 소스들까지 한꺼번에 보여지게 된다면 짧게는 2-3초, 길게는 페이지가 모두 렌딩 될 때까지 빈 화면만 출력되기 때문에 사용자들이 불편함을 느끼게 됩니다.
하지만 이러한 특성 때문에 발생하는 문제도 있는데요.
위와 같이 ‘Not’이라는 텍스트에 폰트 스타일이 적용되어있을 경우, 다른 글자들이 먼저 보여지고 폰트가 적용된 부분이 나중에 보여지면서 사용자들에게 잘못된 정보가 전달될 가능성이 있습니다.
이러한 문제가 발생되지 않도록 최대한 빠른 시간 내에 이 폰트가 보여질 수 있도록 압축률이 높은 폰트를 사용해 주시거나 혹은 모든 텍스트에 다 적용되어 있지 않고 주요 텍스트에만 적용되어있는 서브셋폰트(경량화폰트)를 사용해주시면 됩니다.
압축률이 가장 높은 폰트의 확장자는 woff2 입니다. 인터넷 익스플로러에서는 제공되지 않을 수 있지만 최근에는 인터넷 익스플로러는 잘 사용하지 않는 추세이기 때문에 woff2를 우선적으로 사용해주시면 됩니다.
💡 FOIT/ FOUT
FOIT(Flash of Invisible Text)는 브라우저가 웹 폰트를 다운로드하기 전에 텍스트가 보이지 않는 현상입니다.
FOUT(Flash of Unstyled Text)브라우저가 웹 폰트를 다운로드하기 전에 텍스트가 대체 글꼴로 렌더링되는 현상입니다.
웹 폰트를 사용하는 경우 사용자가 웹 사이트를 처음 방문할 때 둘 중 하나의 현상이 발생할 수 있으며, 크롬 브라우저를 포함 대부분의 웹사이트에서는 FOIT가default, 인터넷 익스플로러에서는 FOUT가default입니다.
폰트 로딩 타입은 font-display 속성으로 변경 가능합니다.
Subset-Font
서브셋 폰트를 사용하실 경우에는 스타일이 적용된 텍스트와 적용되지 않은 텍스트가 있기 때문에, 정보를 정확하고 빠르게 함께 보여주는 것이 중요한지, 같은 스타일이 적용된 텍스트를 보여주는 것이 중요한지, 용도에 따라 적절히 사용해주시면 되겠습니다.
- 공식 문서같은 모든 글자가 필요하거나 글자가 중요한 문서 파일 같은 경우 경량화를 사용하면 나오지 않는 글자가 있을 수 있어 사용하는 것을 비추합니다.
