안녕하세요! 요즘에는 프론트 최적화를 공부하고 있는데요! 공부한 내용을 정리하여 공유해보려고 포스팅을 작성하게 되었습니다. 오늘은 웹폰트 사용의 문제와 font-display를 사용하여 개선하는 방법에 대해 정리해보려고 합니다.
💙 웹 폰트란 무엇인가?
로컬에 폰트 설치와 상관없이 서버에 탑재된 폰트를 다운로드하여 화면에 보여지는 폰트를 말합니다.
우리는 눈누나 GoogleFont 사이트에서 여러 웹 폰트를 찾아볼 수 있습니다. 아래는 웹 폰트를 적용한 예시 코드입니다. font-family에 사용할 폰트 이름과, src에 폰트의 서버 경로를 설정하여 줍니다.
@font-face {
font-family: 'DungGeunMo';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
}💙 웹 폰트의 문제점이 무엇인가?
그렇다면 웹 폰트의 문제가 무엇일까요? 바로 웹 폰트를 다운로드할 때까지 시간이 오래 걸린다는 점 입니다. 콘텐츠의 폰트가 로드되는 시간이 길어진다면 아래와 같은 FOIT과 FOUT이 발생합니다. 사용자의 브라우저에 다운로드될 폰트가 캐시에 저장되었다면 아래와 같은 문제는 경험하지 않겠지만, 처음 서비스를 이용하는 사용자라면 두가지 중 하나의 경험을 할 수 있습니다.
FOIT(Flash of Invisible Text)- 브라우저가 폰트를 완전히 다운로드하기전까지 콘텐츠가 보이지 않는 현상
FOUT(Flash of Unstyled Text)- 브라우저가 폰트를 완저히 다운로드하기 전까지 기본 폰트가 적용된 콘텐츠가 보이는 현상
💙 웹 폰트의 문제를 개선해보자
그렇다면, 어떻게 웹 폰트의 문제를 개선해볼 수 있을까요? 여러 방법을 통해 개선할 수 있지만, 오늘은 font-display를 사용한 방법에 대해서 정리해보려고 합니다.
💡 font-display 속성 사용하기
가장 먼저 다뤄볼 방법은 폰트 적용 시점을 컨트롤 하는 것입니다. font-face가 표시되는 방법을 결정하는font-display를 속성을 사용해볼 수 있습니다.
아래 자료는 font-display를 지원하는 브라우저별 상태입니다. IE를 제외한 크롬, 엣지, Firefox, Opera, 사파리에서는 모두 적용 가능합니다.
font-display 속성
보여줄 콘텐츠에 따라 font-display속성을 사용하여 어떤 시점에서 어떻게 폰트를 적용할지를 설정하여 줍니다. 아래에 각각 적용해보며 적용했을 때의 차이를 확인할 수 있습니다.
auto- 브라우저에 기본 동작에 따름
block-FOIT과 같은 설정 가능
swap-FOUT과 같은 설정 가능
fallback- 0.1초 FOIT후, 3초후에도 불러오지 못했을 경우 기본 폰트 사용함, 불러온 폰트는 캐시에 저장
optional- 0.1초 FOIT후, 네트워크 상태에 따라, 기본 폰트로 유지할지 웹폰트 적용할지 결정후 캐시에 저장
💙 느낀점
사실 개발을 하면서 이런 비슷한 문제는 많이 있었는데 그 동안 문제를 해결하기 위한 방법을 찾으려 노력하지 않은 점을 반성하게 되었어요. 늦게 관심을 가진 만큼 꾸준히 공부해보면서 서비스를 개선하기 위한 노력도 해야겠어요!
