Google Fonts CSS API를 사용하여 웹 글꼴을 효율적으로 제공하는 방법
지난 몇 년 동안 웹 글꼴 기술에는 많은 변화가 있었습니다. 텍스트 이미지나 Flash 플러그인의 이미지를 요구하고 웹사이트의 검색 엔진 최적화를 손상시키는 틈새 관행이 이제 웹 전반에서 표준이 되었습니다. 옛날에는 페이지가 로드되기 전에 사용하지 않을 수도 있는 스타일과 문자를 포함하여 전체 글꼴을 로드해야 했지만 이는 과거의 일이 되었습니다.
Google Fonts CSS API는 웹 글꼴 기술의 변화를 따라잡기 위해 수년에 걸쳐 발전해 왔습니다. 브라우저가 API를 사용한 모든 웹사이트에서 흔히 사용되는 글꼴을 캐시할 수 있도록 하여 웹을 더 빠르게 만들 수 있다는 기존의 가치 제안에서 크게 발전했습니다. 이는 더 이상 사실이 아닙니다. 하지만 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 Japan의 용량은 거의 3.4MB에 불과하며, 이 파일을 모든 사용자에게 다운로드하는 것은 페이지 로드 시간을 끌어올릴 수 있습니다. 모든 밀리초가 중요하고 모든 바이트가 중요하다면 사용자에게 필요한 데이터만 로드해야 합니다.
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와 유니코드 범위를 사용하면 파일 전송을 약 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를 사용하면 사용자가 브라우저에서 사용할 수 있는 이러한 기본 글꼴 전송 기술을 사용할 수 있습니다.
이것은 글꼴 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의 히어로 이미지입니다.