WordPress 웹 글꼴 API가 도착했습니다

WordPress에서 웹 글꼴 API를 향한 여정은 개발자에게 감정의 롤러코스터였습니다. WordPress 5.9 릴리스에서 펀트된 후 Gutenberg 프로젝트로 이동되어 여기에 의존하는 관련 기능과 함께 빌드될 수 있습니다.

API는 Gutenberg 플러그인에 병합되었으며 버전 12.8에 포함될 것입니다. 테스트하려는 테마 작성자는 플러그인의 개발자 버전을 복제하거나 Gutenberg Times에서 야간 버전을 다운로드할 수 있습니다.

Jono Alderson은 2019년 2월에 웹 글꼴 API에 대한 원본 티켓을 열었습니다. 그러나 2021년 후반이 되어서야 엄청난 지원과 개발을 얻었습니다. 대부분의 계정에서 API는 WordPress 5.9와 함께 제공될 준비가 된 것처럼 보였습니다. 그러나 주요 WordPress 개발자 중 한 명인 Andrew Ozz에 의해 보류되었습니다.

대중적인 결정은 아니었지만 최선의 방향이었을 수도 있다. API는 아직 theme.json 지원이 없기 때문에 제한되었습니다. PHP를 통해서만 사용할 수 있다는 것은 테마 작성자가 대부분 항상 자신의 솔루션을 출시하는 일을 하고 있다는 것을 의미했습니다. 이것은 공개에 대한 보류가 아니었지만 API의 가장 일반적인 사용 사례가 될 것입니다.

많은 사람들이 이 기능이 WordPress 5.9에 포함되기를 원했지만 몇 달이 더 지나 사이트 및 콘텐츠 편집기와 통합되는 더 깨끗한 API로 발전할 시간이 생겼습니다.

테마 작성자는 이제 theme.json 파일에서 해당 패밀리와 함께 글꼴 정의를 정의할 수 있으며 WordPress는 편집기와 프런트 엔드에서 필요한 @font-face CSS를 자동으로 로드합니다. 나는 이것을 광범위하게 테스트했으며 문제가 발생하지 않았습니다.

잠재적인 단점은 이 기능이 로컬 공급자에 대한 지원만 함께 제공된다는 점입니다. 즉, 글꼴이 테마와 함께 번들로 제공되어야 합니다. Google 글꼴 공급자는 원래 구현의 일부였지만 나중에 제거되었습니다.

Ozz는 이전 티켓에서 더 자세한 내용을 설명하지만 그의 권장 사항은 현재 Google 글꼴 지원을 중단하는 것이었습니다.

지금은 로컬 글꼴에 대한 지원만 추가합니다. WordPress가 나중에 Google CDN에 대한 지원을 포함하기로 결정하면 구현은 웹 개인 정보 보호법 및 제한 사항을 고려하고 최종 사용자 동의 API 등과 연결되어야 합니다.

관련 문서: Google 호스팅 글꼴을 사용하여 GDPR을 위반한 독일 법원 벌금 웹사이트 소유자

웹 글꼴 API의 개발자 중 한 명인 Ari Stathopoulos는 글꼴 파일을 서버에 직접 쓰는 솔루션을 코어에 번들로 제공하면 개인 정보가 향상될 것이라고 설명했습니다.

그것을 제거하는 대신 성능 및 개인 정보를 개선하기 위해 로컬에서 호스팅되는 웹 글꼴을 적용하여 적절하게 구현할 수 있습니까? 이 방법으로 우리는 좋은 예를 설정하고 현재 Google 글꼴, Adobe 글꼴 및 기타를 사용하는 테마 및 플러그인이 API를 채택하기 시작할 것이므로 WP 에코시스템에서 상당한 성능 및 개인 정보 보호 개선을 볼 수 있습니다.

현재로서는 로컬 글꼴이 공식적으로 지원되는 것처럼 보이지만 테마 및 플러그인 작성자는 사용자 정의 공급자를 등록해야 합니다. Google Fonts 지원을 중단할 때의 한 가지 두려움은 모든 사람이 신뢰할 수 있는 하나의 견고한 제공업체 대신 많은 경쟁 솔루션이 존재하게 될 것이라는 점입니다. 개발자가 자신의 휠을 더 많이 만들수록 버그 또는 보안 문제와 함께 다른 구현이 제공될 가능성이 높아집니다.

Automattic에는 이미 Jetpack용 Google 제공업체에 대한 초안 패치가 있습니다. 그것이 플러그인으로 당겨진다고 가정하면 의심할 여지 없이 자체 google 공급자 ID를 등록하는 테마와 충돌할 것입니다.

로컬 글꼴만 지원하면 더 큰 테마 다운로드 크기를 만들 수도 있습니다. 많은 테마의 경우 이는 문제가 되지 않습니다. 하나, 둘 또는 세 개의 글꼴 패키지가 적당합니다. 그러나 글로벌 스타일 변형이 대중화되면 사전 패키지된 여러 디자인을 포함하기 위해 수십 개의 글꼴을 제공하는 테마를 볼 수 있습니다. 이는 곧 부풀려진 테마 파일로 이어지며 충분한 이미지와 결합하여 테마 작성자는 디렉토리에 제출할 수 있는 10MB 제한에 도달할 수 있습니다. 그것은 내일의 문제처럼 느껴지지만 오늘부터 생각하기 시작하는 것입니다.

API와 관련하여 해결해야 할 몇 가지 문제가 여전히 있습니다. 그러나 WordPress 6.0 릴리스 주기의 초기에 이를 통해 모든 사람에게 테스트하고 개선하는 데 도움이 될 시간을 줄 것입니다.

번들 글꼴 테스트

WordPress에 웹 글꼴을 등록하는 방법은 두 가지가 있습니다. 테마 작성자의 경우 가장 간단한 솔루션은 theme.json 파일을 통해 테마를 정의하는 것입니다. 이 파일은 WordPress 5.8부터 표준이 되었기 때문에 아래에서 다룰 방법입니다. pull 요청 티켓에 PHP 예제가 있습니다.

theme.json 키와 값은 대부분 CSS @font-face 규칙에 해당합니다. 테마 작성자는 사용한 지 얼마 되지 않은 경우 이를 솔질해야 합니다.

테스트를 위해 테마를 통해 3개의 웹 글꼴을 등록했으며 다음 스크린샷은 편집기에서 작동하는 것을 보여줍니다.

웹 글꼴은 특정 글꼴 모음 정의의 일부로 settings.typography.fontFamily 아래에 등록되어야 합니다. 다음은 Cabin 글꼴을 사용하여 테마 중 하나에서 테스트 중인 코드의 복사본입니다.

 { "settings": { "typography": { "fontFamilies": [ { "fontFamily": "\"Cabin\", sans-serif", "slug": "primary", "name": "Primary", "fontFace": [ { "fontFamily": "Cabin", "fontWeight": "400 700", "fontStyle": "normal", "src": [ "file:./public/fonts/cabin/Cabin-VariableFont_wdth,wght.ttf" ] }, { "fontFamily": "Cabin", "fontWeight": "400 700", "fontStyle": "italic", "src": [ "file:./public/fonts/cabin/Cabin-Italic-VariableFont_wdth,wght.ttf" ] } ] } ] } } }

file:./public/fonts/*.ttf 는 테마 폴더에 상대적입니다. 테마 작성자는 테마 구조에 맞게 이를 조정해야 합니다.