[CSS] font-display 속성으로 웹폰트 구글 검색 최적화하기

웹폰트 사용은 구글 검색 최적화에 직접적인 영향을 미칩니다.

특힌 한글 글꼴은 영문 글꼴보다 파일 크기가 굉장히 크기 때문에 초기 페이지 로딩 지연에 많은 영향을 미칩니다. 한글 웹폰트를 사용할 때 쉽게 간과하는 부분이 웹폰트 파일 크기인데 최대한 파일 크기가 작고 가벼운 글꼴을 사용해야 합니다.

최대한으로 해도 1-2메가는 넘지 않아야 하며, 웹폰트용으로 최적화 된 1메가 이하의 글꼴 파일 크기인 것이 좋습니다.

일반적으로 셰리프 글꼴(명조 계열)보다는 산셰리프 글꼴(고딕 계열)이 파일 크기가 작기 때문에 산셰리프 계열을 사용하는 것을 추천합니다.

그리고 웹폰트용으로 최적화 된 woff 폰트를 사용하는 것이 좋습니다.

웹폰트를 사용하면 웹 폰트가 다운로드 되고 로딩되는 동안 텍스트가 표시되지 않습니다. 구글 검색 최적화에서는 당연히 악영향을 미칩니다. 초기 로딩 타임에 웹폰트 로딩 완료 시점까지 텍스트 내용이 보이지 않게 됩니다.

CSS font-display 속성을 사용하면 웹폰트가 로딩되기 전에 기본 글꼴로 텍스트를 먼저 표시해주기 때문에 페이지 로딩 지연이 줄어들어 검색 최적화에 도움이 됩니다.

body{
    font-display: swap;
}

"swap" 값은 웹폰트가 로딩되는 동안 기본 글꼴로 텍스트를 먼저 표시하도록 합니다.

5가지 옵션이 있지만, auto, block은 사실상 같고, 웹폰트가 다운로드 되어 로딩이 완료되고 텍스트에 웹 폰트가 적용되어 렌더링이 되는 시점까지 텍스트가 보이지 않습니다. 기본 값이라고 이해하면 됩니다.

나머지 두 가지 옵션은 사실상 사용되지 않으며, "swap" 속성을 사용할지 여부만 중요합니다.

swap은 웹폰트가 적용 가능해지는 시점까지 시스템 글꼴을 적용해 일단 텍스트를 표시합니다.

구글 서치 콘솔에서 다음과 같은 검색 최적화 진단 이슈가 있으면 font-display 속성을 사용해서 초기 로딩 시간을 더 단축할 수 있습니다.