1. 웹 폰트에서 발생할 수 있는 문제
특정 웹 페이지에 들어갔을 때, 페이지의 글자가 늦게 뜨거나 글꼴이 갑자기 변하는 경우를 경험할 수 있었다.
대표적인 경우가 내 개인 프로젝트였다.
이처럼 개발자의 의도대로 글자가 제대로 표현되지 않는 이유는, 웹 페이지에 적용할 폰트가 완전히 로드되지 않았기 때문이다.
참고로 위의 페이지에서는 'Neo 둥근모꼴' 웹 폰트를 적용하였다.
웹 폰트 표시에 관한 이슈는 아래의 경우에서도 볼 수 있다.
2016년 미국의 상원 의원인 Mitt Romney에 관한 기사에서, 웹 폰트가 로드되기 전과 로드된 이후의 화면을 비교한 사진이다.
단순한 강조를 위해 Not에 웹 폰트를 적용하였지만, 제대로 로드되지 않아 Not이 보이지 않게 되었고, 그 결과 기사의 제목은 완전히 다른 의미를 갖게 되었다.
2. 용어 살펴보기
용어 | 설명 |
FOIT(Flash of Invisible Text) | 글꼴이 로드되기 전까지 글자를 보여주지 않음. 로드 된 이후 글자를 보여줌. |
FOUT(Flash of Unstyled Text) | 글꼴이 로드되지 전까지 글꼴을 적용하지 않음. 로드 된 이후 reflow를 통해 새로운 글꼴을 적용함 |
2.1. FOIT
- 웹 폰트가 로드된 이후에 텍스트를 보여준다.
- 웹 페이지에 중요한 내용을 담고 있을 경우, FOIT을 피해야 한다. (내용이 보이지 않으므로)
- 2016년 이후의 모던 브라우저는 3초 정도의 제한시간을 두어, 폰트가 로드되지 않을 경우 시스템 기본 폰트를 적용하여 글자를 보여준다
2.2. FOUT
- 웹 폰트가 로드될 때까지 시스템 기본 글꼴를 보여준 이후, 로드된 이후에 reflow를 통해 글꼴을 대체한다.
- 내용 자체는 보이기 때문에 심미성을 매우 강조한 웹 페이지가 아닌 이상, FOIT보다 낫다고 볼 수 있다.
- 하지만 글꼴이 대체되는 과정에서 레이아웃이 틀어질 수 있기 때문에(글꼴마다 자간, 높이 등이 다르기 때문) UX적으로 좋지 않다.
2.3. 브라우저별 차이
- 2016년 이후 @font-face를 지원하지 않는 브라우저는 없다. (좌상)
- 폰트가 로드되지 않았을 경우, IE와 Edge는 FOUT을 기본적으로 적용한다. (우상)
- 폰트가 로드되지 않았을 경우, Chrome Firefox Opera Safari는 기본적으로 FOIT을 3초 적용한다. (좌하)
- 폰트가 로드되지 않았을 경우, 폰트가 로드되기 전까지 무한정 FOIT을 적용하는 브라우저는 없다. (우하)
3. font-display 적용하기
@font-face의 속성으로서, 폰트를 다운로드하고 있는 과정에서 글자를 어떻게 보여줄 것인가를 결정하는 CSS 속성이다.
총 5가지의 경우로 나눌 수 있다.
3.1. font-display: auto (default)
브라우저의 기본 동작을 따른다.
3.2. font-display: block
FOIT으로 동작한다.
즉, 폰트가 다운로드되기 전까지 글자를 보여주지 않으며(최대 3초), 로드된 이후에 글자를 보여준다.
3.3. font-display: swap
FOUT으로 동작한다.
즉, 폰트가 다운로드되기 전까지 기본 글꼴을 보여주며, 로드된 이후에 글꼴이 바뀐다.
3.4. font-display: fallback
0.1초 동안 글자를 숨기고, 3초 이내에 글꼴이 로드되면 해당 글꼴을 적용한다.
0.1초 안에 글꼴이 로드될 경우 처음부터 로드된 글꼴을 적용한다.
0.1초 이상 3초이내에 글꼴이 로드된 경우, 로드되기 이전까지 기본 글꼴을 적용하다가, 로드된 이후에 글꼴을 변경한다.
3초 이내에 글꼴이 로드되지 않은 경우, 계속해서 기본 글꼴을 적용한다.
(즉, 3초 이후에 글꼴이 로드되어도 계속 기본 글꼴을 사용한다)
(이때, 로드한 글꼴은 브라우저 캐시에 저장해두어, 다음 접속시에는 로드한 글꼴이 바로 적용된다)
3.5. font-display: optional
0.1초 동안 글자를 숨긴다.
0.1초 이내에 글꼴이 로드될 경우 해당 글꼴을 사용하며, 그렇지 않을 경우 기본 글꼴을 사용한다.
(0.1초 이후에 글꼴이 로드되어도, 계속 기본 글꼴을 사용한다)
이때 특이한점은, 네트워크 상황을 고려한다는 것에 있다.
만약 네트워크 상태가 좋지 않을 경우 처음부터 기본 글꼴로 보여주며, 낮은 우선순위로 글꼴을 로드한다.
이후 로드가 완료될 경우, 글꼴을 브라우저 캐시에 저장해두어, 다음 접속시 로드한 글꼴이 바로 적용된다.
'General' 카테고리의 다른 글
DNS, DNS 레코드 (0) | 2023.12.27 |
---|---|
Globs (0) | 2023.12.07 |
CRP (Critical Rendering Path) (0) | 2023.11.24 |
husky로 commit lint 사용하기 (0) | 2023.11.03 |
Semantic Version (SemVer) (1) | 2023.10.05 |