Google Fonts CSS API를 사용하여 웹 글꼴을 효율적으로 전송하는 방법
지난 몇 년 동안 웹 글꼴 기술은 많은 변화를 거쳤습니다. 텍스트 이미지나 플래시 플러그인이 필요하고 웹사이트의 검색엔진 최적화를 저해하는 틈새적인 관행이었던 이 기능이 이제 웹 전반에서 표준 관행이 되었습니다. 한때는 페이지가 로드되기 전에 사용하지 않았을 수도 있는 스타일과 문자가 포함된 전체 글꼴을 로드해야 했지만 이제는 그런 일도 과거의 일이 되었습니다.
Google Fonts CSS API도 웹 글꼴 기술의 변화에 맞춰 수년간 진화해 왔습니다. Google Fonts는 브라우저가 API를 사용하는 모든 웹사이트에서 흔히 사용되는 글꼴을 캐시하도록 허용하여 웹을 더 빠르게 만드는 것이라는 원래의 가치 제안에서 한 걸음 더 나아갔습니다. 이는 더 이상 true가 아니지만, API는 여전히 웹사이트가 빠르게 로드되고 글꼴이 제대로 작동하도록 중요한 추가 최적화를 제공합니다.
웹사이트에서 Google Fonts CSS API를 사용하면 CSS 로드 시간을 최소화하는 데 필요한 글꼴 데이터만 요청할 수 있으므로 웹사이트 방문자가 콘텐츠를 최대한 빨리 로드할 수 있습니다. API는 각 요청에 해당 웹브라우저에 가장 적합한 글꼴로 응답합니다.
코드에 HTML 한 줄을 포함하면 됩니다.
Google Fonts CSS API 사용 방법
Google Fonts CSS API 문서에 요약되어 있습니다.
프로그래밍을 할 필요가 없습니다. HTML 문서에 특수 스타일시트 링크를 추가한 다음 CSS 스타일에서 글꼴을 참조하기만 하면 됩니다.
최소한 HTML에 다음과 같이 한 줄을 포함해야 합니다.
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
API에서 글꼴을 요청할 때 원하는 계열을 지정하고 원하는 경우 두께, 스타일, 하위 집합 및 기타 여러 옵션을 지정합니다. 그러면 API는 다음 두 가지 방법 중 하나로 요청을 처리합니다.
- 요청에서 API에 이미 파일이 있는 공통 매개변수를 사용하는 경우 사용자에게 즉시 CSS를 반환하여 이러한 파일로 안내합니다.
- API에 현재 캐시되지 않은 매개변수가 있는 글꼴을 요청하면 HarfBuzz를 사용하여 글꼴을 즉시 하위 집합으로 만들고 이를 가리키는 CSS를 반환합니다.
글꼴 파일은 클 수 있지만 반드시 클 필요는 없습니다.
웹 글꼴은 클 수 있습니다. 사실입니다. WOFF2의 Noto Sans Japanese 한 가지 서체만 해도 크기가 거의 3.4MB에 달하며, 이를 모든 사용자에게 다운로드하면 페이지 로드 시간이 느려질 수 있습니다. 1밀리초가 소중하고 1바이트가 귀중한 경우 사용자에게 필요한 데이터만 로드해야 합니다.
Google Fonts CSS API를 사용하면 실시간으로 생성되는 매우 작은 글꼴 파일 (하위 집합이라고 함)을 만들어 웹사이트에서 필요한 텍스트와 스타일만 사용자에게 제공할 수 있습니다. 전체 글꼴을 제공하는 대신 text 매개변수를 사용하여 특정 문자를 요청할 수 있습니다.
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />
또한 CSS API는 API 매개변수 없이 사용자에게 추가 웹 글꼴 최적화를 자동으로 제공합니다. 이 API는 unicode-range가 이미 사용 설정된 상태로 CSS 파일을 제공하므로 (웹브라우저에서 지원하는 경우) 사용자는 웹사이트에서 필요한 특정 문자에 대해서만 글꼴을 로드합니다.
유니코드 범위 CSS 설명자는 이제 대규모 글꼴 다운로드와 맞서 싸우는 데 사용할 수 있는 한 가지 도구입니다. 이 CSS 속성은 @font-face 선언에 포함된 유니코드 문자의 범위를 설정합니다. 이러한 문자 중 하나가 페이지에 렌더링되면 해당 글꼴이 다운로드됩니다. 이는 모든 언어에 잘 작동하므로 라틴어, 그리스어 또는 키릴 문자가 포함된 글꼴을 사용하여 더 작은 하위 집합을 만들 수 있습니다. 위 차트에서 세 가지 문자 집합을 모두 로드해야 하는 경우 글리프가 600개를 넘게 됨을 알 수 있습니다.
또한 웹에서 중국어, 일본어, 한국어(CJK) 글꼴을 사용할 수 있습니다. 위 차트에서 CJK 글꼴은 라틴 문자 글꼴보다 문자 수의 15~20배를 차지한다는 것을 알 수 있습니다. 이러한 글꼴은 일반적으로 매우 크며 해당 언어의 많은 문자가 다른 언어의 문자만큼 자주 사용되지 않습니다.
CSS API와 unicode-range를 사용하면 파일 전송을 약 90% 줄일 수 있습니다. unicode-range 설명자를 사용하면 각 부분을 개별적으로 정의할 수 있으며, 각 슬라이스는 콘텐츠에 이러한 문자 범위의 문자 중 하나가 포함된 후에만 다운로드됩니다.
예: Noto Sans JP에서 'こんにちは'라는 단어만 설정하려면 다음을 실행하면 됩니다.
- 자체 WOFF2 파일을 자체 호스팅합니다.
- CSS API를 사용하여 WOFF2를 가져옵니다.
- text= 매개변수를 'こんにちは'로 설정하여 CSS API를 사용합니다.
이 예에서는 CSS API를 사용하면 대용량 글꼴을 유니코드 범위로 분리하는 API의 기본 제공 지원 덕분에 WOFF2 글꼴을 자체 호스팅하는 것보다 이미 97.5%를 절약할 수 있음을 알 수 있습니다. 한 단계 더 나아가 표시할 텍스트를 정확하게 지정하면 글꼴 크기를 CSS API 글꼴의 95.3%로 줄일 수 있습니다. 이는 셀프 호스팅 글꼴보다 99.9% 작습니다.
Google Fonts CSS API는 사용자의 브라우저에서 지원하는 가장 작고 호환성이 높은 형식으로 글꼴을 자동으로 전송합니다. 사용자가 WOFF2를 지원하는 브라우저를 사용하는 경우 API는 WOFF2로 글꼴을 제공하지만 이전 브라우저를 사용하는 경우 API는 해당 브라우저에서 지원하는 형식으로 글꼴을 전송합니다. 또한 각 사용자의 파일 크기를 줄이기 위해 API는 필요하지 않은 경우 글꼴에서 데이터를 삭제합니다. 예를 들어 힌트 데이터가 필요하지 않은 브라우저를 사용하는 사용자의 경우 힌트 데이터가 삭제됩니다.
Google Fonts CSS API로 웹 글꼴의 미래 경쟁력 확보
Google Fonts팀은 WOFF2와 같이 웹 글꼴 기술을 지속적으로 혁신하는 새로운 W3C 표준에도 기여하고 있습니다. 현재 진행 중인 프로젝트 중 하나는 증분 글꼴 전송으로, 이를 통해 사용자는 글꼴 파일이 화면에 사용될 때 아주 작은 부분만 로드하고 나머지는 필요에 따라 스트리밍하여 유니코드 범위의 성능을 능가할 수 있습니다. Google의 웹 글꼴 API를 사용하면 사용자가 브라우저에서 이러한 기본 글꼴 전송 기술을 사용할 수 있게 될 때 개선사항을 이용할 수 있습니다.
이것이 fonts API의 장점입니다. 웹사이트를 변경하지 않고도 사용자가 새로운 기술 개선사항을 모두 누릴 수 있습니다. 새로운 웹 글꼴 형식인가요? 걱정하지 마세요. 새로운 브라우저 또는 운영체제가 지원되나요? 문제가 해결되었습니다. 따라서 웹 글꼴 유지보수에 시간을 낭비하지 않고 사용자와 콘텐츠에 집중할 수 있습니다.
내장된 가변 글꼴 지원
변수 글꼴은 여러 축에 걸쳐 다양한 디자인 변형을 저장할 수 있는 글꼴 파일로, Google Fonts CSS API의 새 버전에서는 이러한 글꼴에 대한 지원이 포함되어 있습니다. 변형 축을 추가하면 글꼴을 더욱 유연하게 사용할 수 있지만 글꼴 파일 크기가 거의 두 배로 늘어날 수 있습니다.
CSS API 요청을 더 구체적으로 하면 Google Fonts CSS API는 사용자의 다운로드 크기를 줄이기 위해 웹사이트에 필요한 가변 글꼴의 일부만 제공할 수 있습니다. 이렇게 하면 페이지 로드 시간이 길어지지 않고도 웹에 가변 글꼴을 사용할 수 있습니다. 축에 단일 값을 지정하거나 범위를 지정하면 됩니다. 한 번의 요청으로 여러 축과 여러 글꼴 패밀리를 지정할 수도 있습니다. API는 필요에 따라 유연하게 사용할 수 있습니다.
간편하게 구현하고 자동으로 최적화
Google Fonts CSS API를 사용하면 다음과 같은 글꼴을 제공할 수 있습니다.
- 웹브라우저와의 호환성 향상
- 최대한 작습니다.
- 빠르게 전송됩니다.
- 더 쉽게 사용할 수 있습니다.
Google Fonts에 관한 자세한 내용은 fonts.google.com을 참고하세요. CSS API에 관한 자세한 내용은 API 문서를 참고하세요.
감사의 말씀
leesehee님이 제공한 히어로 이미지입니다.