구글 폰트 속도 빠르게 (사용할 문자를 지정)

구글 폰트 요청시, text 파라미터로 폰트 데이터를 최적화하여 페이지 로딩 속도를 개선하는 방법을 설명합니다. 웹 폰트로 구글 폰트만 사용했는데... 이제껏 왜 몰랐나 싶어요.

예를 들어, 아래와 같은 상황인 경우

웹 페이지의 특정 부분에만 웹 폰트를 적용한다❗

※Google Fonts(구글 폰트) 공식 사이트에서 웹 폰트를 적용하기 위해 코드를 얻는 과정은 생략합니다.

이렇게↓↓↓ 하면 될까요❓

[수정 전]

위와 같은 코드는 Google Fonts에서 기본적으로 제공하는 것으로, 우리는 '구글 폰트 테스트'라는 특정 문자열에만 웹 폰트를 적용할 작정이지만, 사실은 'ABC...abc...가나다...123...' 모든 문자에 해당하는 '나눔 펜 스크립트'(Nanum Pen Script) 데이터 모두를 브라우저가 다운로드합니다. 아무리 페이지를 처음 열 때만 다운로드하고 캐싱한다지만 비효율적이라고 생각합니다.

그렇다면 사용할 문자를 미리 지정하고, 그 문자에 해당하는 필요한 폰트 데이터만 맞춤으로 다운로드할 수는 없을까요❓

이렇게↓↓↓ 수정해 보세요❗

[text 파라미터를 사용하기]

...(생략)?family=Nanum+Pen+Script&display=swap

↓↓↓

...(생략)?family=Nanum+Pen+Script&display=swap&text=구글폰트테스트

[수정 후]

브라우저는 지정한 폰트 데이터만 맞춤으로 다운로드하므로 처음에 페이지를 로딩하는 속도가 빨라집니다.

참고로 저는 PageSpeed Insights(페이지 속도 이해·간파)로 페이지 속도를 측정하고 있습니다. 이 도구를 처음 접하시는 분은 조금 복잡하고 어려워 보일 수 있지만, 페이지 속도를 개선하는 방법까지 추천해 주는, 구글에서 제공하는 정말 유용한 도구 중의 하나입니다.

그리고 개발자 도구(Windows 크롬 기준, Ctrl + Shift + I 또는 F12)의 Network 도구에서 다운로드 용량이 얼마나 줄어들었는 지를 직접 확인해 보세요. 크롬에서 개발자 도구를 연 상태에서 새로고침 아이콘을 우클릭하고 '캐시 비우기 및 강력 새로고침'을 클릭하면 처음에 해당 페이지를 열 때와 같은 상황을 재현할 수 있습니다.