WordPress에서 로컬로 글꼴을 호스팅하는 방법(클래식 및 블록 테마!)

사용자 지정 웹 글꼴을 사용하면 사이트를 더욱 독특하게 만들고 브랜드를 구별할 수 있는 좋은 방법이지만 개인 정보 보호에서 성능에 이르기까지 특정 문제가 발생할 수도 있습니다. 해결책: 대신 WordPress 웹사이트에서 글꼴을 로컬로 호스팅합니다.

이를 돕기 위해 이 게시물에서는 이 주제에 대해 알아야 할 모든 것을 알려드립니다. 아래에서는 우선 WordPress에서 글꼴을 로컬로 호스팅하는 것이 좋은 아이디어인 이유에 대해 논의한 다음 클래식 테마와 WordPress 블록 테마 모두에서 글꼴을 구현할 수 있는 코드 및 코드 없는 솔루션에 대한 요약을 제공합니다.

웹 글꼴을 로컬과 원격으로 호스팅

따라서 가장 먼저 이야기해야 할 것은 글꼴을 로컬에서 호스팅하는 것이 무엇을 의미하는지입니다.

요즘 많은 사람들이 소위 웹 글꼴을 사용하여 웹 사이트의 타이포그래피를 변경합니다. 이들은 일반적으로 타사 서비스에서 로드되는 글꼴 파일이며 가장 인기 있는 것은 Google 글꼴입니다.

특별한 링크를 추가하기만 하면 웹사이트에서 사용할 수 있는 방대한 무료 글꼴 라이브러리가 있습니다. 그런 다음 누군가 귀하의 사이트 보기를 요청하면 방문자에게 사이트를 표시할 수 있도록 원격으로 로드됩니다. Google 글꼴은 또한 사용자가 글꼴을 매우 쉽게 전환할 수 있도록 많은 테마에 통합되어 있습니다.

이와는 대조적으로 로컬에서 글꼴을 호스팅할 때 글꼴 파일은 Google과 같은 원격 서버에서 로드되지 않고 대신 자체 서버에 상주하며 방문자는 그곳에서 글꼴 파일을 받습니다. 결국 둘 다 다른 방식으로 동일한 것을 달성합니다.

WordPress에서 로컬로 글꼴을 호스팅해야 하는 이유는 무엇입니까?

타사 솔루션을 사용하는 대신 자체 서버에 글꼴 파일을 저장하는 데는 여러 가지 이유가 있습니다.

• 개인 정보 보호 문제 — 특히 유럽 개인 정보 보호법의 적용을 받는 경우 특히 Google의 웹 글꼴을 사용하는 것이 문제가 될 수 있습니다. 회사는 방문자 IP 주소 및 기타 정보를 수집하며, 이를 사용하려면 개인 정보 보호 정책에 언급해야 합니다. 그렇지 않으면 벌금이 부과될 위험이 있습니다. 이와 같은 문제를 방지하기 위해 많은 사람들이 대신 로컬에서 글꼴을 호스팅하도록 선택합니다.
• 좋은 가용성 — 타사 호스팅 글꼴 사용의 문제는 글꼴을 제공하는 서비스에 의존하게 된다는 것입니다. 회사가 문을 닫거나 서버가 고장나거나 어떤 이유로 URL이 변경되는 경우 갑자기 사이트에 선택한 서체가 없어집니다. Google의 경우에는 그럴 가능성이 없지만, 당신은 결코 알 수 없으며 더 미친 일이 일어났습니다.
• 폭넓은 선택 — 확립된 라이브러리는 다양한 글꼴을 제공하지만 웹 글꼴 형식이 아닌 글꼴이 더 많이 있습니다. 결과적으로 글꼴을 로컬에서 호스팅하는 방법을 알면 프리미엄 글꼴을 구매하고 사용할 수 있는 더 많은 가능성이 제공됩니다.
• 성능 — 자신의 글꼴을 호스팅할 때 글꼴이 로드되는 방식을 완전히 제어할 수 있습니다. 캐싱을 구성하고 자신의 서버에서 문제를 해결할 수 있습니다. 또한 자체 글꼴을 호스팅하면 다른 연결에서 데이터를 가져올 필요가 없으므로 HTTP 요청이 줄어듭니다. 위의 모든 것은 사이트 성능에 좋습니다.

단점 및 주의 사항

동시에 로컬 서버에서 글꼴 호스팅에 반대하는 몇 가지 요소도 있습니다.

• 성능, 다시 말하지만 Google 글꼴은 특히 고성능을 제공하는 방식으로 설정됩니다. 가장 가까운 서버에서 글꼴 파일을 제공하는 CDN이 있습니다. 또한 가장 많이 사용되는 글꼴 중 다수는 이미 대부분의 브라우저 캐시에 있습니다. 결과적으로 프리미엄 사용자 지정 글꼴보다 빠르게 로드됩니다. 자신의 동영상을 호스팅하면 안 되는 이유와 같습니다. 위의 모든 이유 때문에 로컬 글꼴을 사용하려는 경우 자체 CDN을 사용하는 것이 좋습니다.
• 더 높은 복잡성 — 글꼴 파일을 로컬로 설정하는 것은 테마에 설치된 Google 글꼴을 사용하는 것보다 더 어렵습니다. 그러나 아래에서 볼 수 있듯이 완전히 수동 경로로 이동하지 않는 한 그다지 어렵지 않습니다. 실제로 몇 가지 원 클릭 플러그인 솔루션이 있습니다.

파일 형식에 대한 간략한 설명

한 가지 알아야 할 사항은 글꼴이 다양한 형식으로 제공되며 가장 일반적인 형식은 다음과 같습니다.

• TrueType 글꼴(.ttf) — 1980년대에 Apple과 Microsoft에서 개발한 글꼴 표준입니다. 운영 체제에서 가장 일반적인 형식이며 웹에서도 사용할 수 있습니다. 권장되는 파일 형식은 아니지만 이전 버전의 Safari, iOS 및 Android에 적합합니다.
• OpenType 글꼴(.otf) — TrueType을 기반으로 하며 Microsoft에서 개발하고 상표를 등록한 .otf 형식은 확장 가능한 컴퓨터 글꼴용입니다.
• Embedded OpenType 글꼴(.eot) — 이것은 웹에서 렌더링하기 위한 OpenType의 레거시 형식입니다. 이전 버전의 Internet Explorer에서 필요합니다.
• 웹 개방형 글꼴 형식(.woff) — WOFF는 웹 페이지에서 사용하기 위해 명시적으로 개발되었습니다. 압축 및 추가 메타데이터가 포함된 OpenType/TrueType 형식입니다. 이 형식은 W3C에서 사용하도록 권장되며 모든 주요 브라우저에서 지원됩니다.
• Web Open Font Format 2.0(.woff2) — 더 빠른 다운로드를 위해 더 나은 압축 기능을 갖춘 향상된 버전의 .woff 입니다. Google에서 개발했으며 최신 브라우저와 호환됩니다.
• SVG 글꼴(.svg) — 글꼴에 SVG 모양을 사용할 수도 있지만 이 방법은 현재 Safari에서만 지원됩니다.

그렇다면 어떤 형식을 선택해야 할까요? 물론 성능 면에서 WOFF/WOFF2가 가장 적합합니다. 그러나 이전 브라우저와 호환되기 위해서는 다른 형식을 포함하는 것도 유용합니다. 또한 Google Fonts와 같은 일부 제공업체는 .ttf 또는 이와 유사한 다운로드 형식만 제공합니다. 운 좋게도 이를 우회할 수 있는 방법이 있으며 잠시 동안 보여드리겠습니다.

그러나 공급자로부터 웹 사이트에 대한 사용자 정의 글꼴을 조달할 때 위의 사항을 염두에 두십시오.

WordPress에서 로컬로 글꼴 호스팅(수동, 클래식 테마)

이 시점에서 마침내 WordPress 사이트에서 실제로 글꼴을 로컬로 호스팅하는 방법에 대해 이야기할 것입니다. 다루어야 할 다양한 시나리오가 있으며 고전적인 테마와 수동 방법으로 시작합니다.

이것은 가장 기술적인 접근 방식이므로 더 쉬운 솔루션을 살펴보기 전에 가장 어려운 방법을 먼저 배우게 됩니다. 모든 작업을 손으로 하면 그 이면의 메커니즘을 이해하는 데 도움이 되고 그 과정에서 WordPress 기술도 향상됩니다.

1. 글꼴 파일 가져오기

글꼴을 로컬로 호스트하는 데 가장 먼저 필요한 것은 글꼴 파일입니다. Google 글꼴을 사용하면 다운로드할 수 있지만 위에서 언급한 것처럼 아직 최신 파일 형식을 제공하지 않습니다. 이론적으로 파일을 원하는 형식으로 직접 변환할 수 있지만 대신 Google Webfonts Helper를 사용하는 것이 훨씬 쉽습니다.

그들은 변환 작업을 수행했을 뿐만 아니라 글꼴을 포함하는 데 필요한 코드도 제공합니다.

여기서 가장 먼저 해야 할 일은 원하는 글꼴을 선택하는 것입니다. 이를 위해 왼쪽에 있는 목록이나 그 위에 있는 검색 필드를 사용할 수 있습니다. 원하는 서체를 찾았으면(이 예에서는 Advent Pro를 사용함) 오른쪽에서 문자 세트와 스타일을 선택할 차례입니다.

먼저 키릴 문자, 그리스어 또는 라틴어 확장 문자가 필요한지 확인하십시오. 그 아래에서 필요한 모든 글꼴 스타일의 상자를 선택하십시오. 웹사이트에서 실제로 사용할 항목만 선택하여 방문자가 보지도 않는 항목을 로드하지 않도록 하십시오.

CSS 복사 에서 다운로드할 파일 형식을 선택할 수 있습니다.

Best Support 설정에는 .eot , .ttf , .svg , .woff 및 .woff2 파일이 포함되지만 Modern Browsers에는 후자의 두 파일만 포함됩니다. 일반적으로 기본 설정으로 두는 것이 좋습니다.

선택 사항에 만족하면 아래로 스크롤하고 큰 파란색 버튼을 클릭하여 파일을 다운로드합니다.

2. WordPress 사이트에 글꼴 파일 업로드

하드 드라이브에 글꼴 파일이 있으면 첫 번째 단계는 압축을 푸는 것입니다. 그런 다음 서버에 업로드해야 합니다.

이를 위해 FTP 클라이언트를 통해 연결하고 테마 디렉토리( wp-content > themes 내부)로 이동합니다. 여기에서 파일을 자체 디렉토리(예: fonts 에 두는 것이 좋습니다. 따라서 먼저 디렉토리를 만든 다음 글꼴 파일을 FTP 클라이언트로 끌어다 놓아 업로드합니다.

파일이 작기 때문에 오래 걸리지 않으며 다음 단계로 넘어갈 수 있습니다.

3. WordPress 테마에 로컬 글꼴 로드

다음으로 웹 사이트에서 로컬 글꼴을 사용하려면 먼저 해당 글꼴을 로드해야 합니다. 이를 위해 Google Webfonts Helper는 친절하게도 필요한 마크업을 이미 제공하고 있습니다. 아마 이전에 본 적이 있을 것입니다.

파일을 넣은 폴더가 fonts 가 아닌 경우 하단에서 폴더 이름을 사용자 정의할 수 있습니다. 최고의 호환성을 위한 코드를 사용할지 이전에 최신 브라우저에만 사용할지 이미 선택했어야 합니다. 따라서 이제 마크업이 있는 필드를 클릭하여 모두 표시한 다음 Ctrl/Cmd+C 를 사용하여 복사할 차례입니다.

그런 다음 서버의 테마 폴더로 이동하여 스타일 시트( style.css )를 엽니다. 여기에 앞서 복사한 마크업을 시작 부분에 붙여넣습니다.

참고: @font-face 와 함께 상대 경로를 사용하려면 WordPress가 테마 폴더의 fonts 디렉토리에 있는 로컬 글꼴 파일에 액세스하도록 하려면 위 URL 앞의 ../ 삭제해야 합니다. 제 경우에는 각 줄은 다음과 같습니다.

 url('fonts/advent-pro-v19-latin-regular.woff') format('woff'), /* Modern Browsers */

이것은 style.css 파일이 테마 폴더에 직접 있다고 가정합니다.

필요한 사항을 변경한 후 파일을 저장하고 다시 업로드하면 WordPress 사이트에서 로컬 글꼴을 사용할 준비가 된 것입니다.

4. 사이트에 이미 로드된 글꼴 제거

이 단계는 테마가 이미 타사 글꼴을 가져오는 경우에만 적용됩니다. 위에서 언급한 이유와 동일한 글꼴을 두 번 로드하지 않고 로컬 글꼴이 적용되었는지 확인하기 위해 이를 제거하려고 합니다.

타사 글꼴을 끄는 방법은 처음에 글꼴을 로드하는 방법에 따라 다릅니다. 일부 테마에는 시스템 글꼴 등으로 전환할 수 있는 전용 옵션이 있습니다.

어떤 이유로 헤더가 header.php 파일에 하드코딩되어 있으면 거기에서 제거해야 합니다(차일드 테마 사용). functions.php 통해 로드되는 경우 거기에서 호출을 제거할 수 있습니다. 자식 테마에서도 이 작업을 수행하십시오.

마지막으로 시도해 볼 수 있는 Google 글꼴 비활성화 및 제거가 있습니다. 자동 최적화에는 Google 글꼴을 제거하는 옵션도 있으며 추가 탭에서 찾을 수 있습니다.

4. 로컬 글꼴 사용

마지막 단계는 실제로 사이트의 요소에 로컬 글꼴을 할당하는 것입니다. 예를 들어 Twenty Twenty-One 테마에서 다음 마크업을 사용할 수 있습니다.

 .entry-title { font-family: Advent Pro; }

그러면 블로그 게시물 제목이 새로운 Advent Pro 글꼴로 표시됩니다.

클래식 테마에서 로컬 글꼴 호스팅: 플러그인 에디션

위의 내용이 너무 복잡하고 이미 웹사이트에 Google 글꼴이 있는 경우(예: 테마를 통해) WordPress 플러그인 솔루션을 사용하여 글꼴을 로컬로 호스팅할 수도 있습니다. 이를 위한 최상의 옵션 중 하나는 WordPress 디렉토리에서 무료로 사용할 수 있는 OMGF 또는 Optimize Google Fonts 플러그인입니다. Plugins > Add New 를 통해 일반적인 방법으로 설치하십시오.

그렇게 하면 설정 아래에 Google 글꼴 최적화 라는 새 메뉴 항목이 있습니다. 이 메뉴로 이동하려면 클릭하십시오.

사용법은 매우 간단합니다. 대부분의 경우 하단의 저장 및 최적화를 클릭하기만 하면 됩니다. 그러면 플러그인이 자동으로 사이트의 모든 Google 글꼴 스타일 시트를 찾아 로컬 버전으로 바꿉니다. 화면 하단에서 모두 볼 수 있습니다.

여기에서 일부 글꼴 또는 글꼴 스타일을 로드하지 않거나 사전 로드하지 않도록 플러그인을 구성할 수 있는 옵션도 있습니다. 이는 접힌 부분 위에 나타나는 타이포그래피에 중요합니다. 더 많은 설정이 있지만 대부분 무언가가 작동하지 않는 경우를 위한 것입니다.

OMGF는 또한 귀하의 사이트에 더 많은 Google 글꼴을 설치하기 위한 애드온을 지불했습니다. 가격이 매우 합리적이며 체크 아웃 할 가치가 있습니다. 다른 플러그인 옵션으로는 Perfmatters와 앞서 언급한 Google 글꼴 비활성화 및 제거 플러그인의 프로 버전이 있습니다.

WordPress 블록 테마에서 수동으로 글꼴 호스팅

WordPress 블록 테마를 사용하면 로컬 글꼴을 사용할 수도 있습니다. 사실, 이 글을 쓰는 시점에서 그들이 하는 일의 전부입니다. 현재 블록 테마에서 타사 글꼴을 호스팅할 수 없습니다(해당 API는 제작 중임).

이러한 이유로 글꼴 ​​파일을 획득하고 서버에 업로드하는 처음 몇 단계는 클래식 테마와 동일합니다. 거기에서 차이점이 시작됩니다.

theme.json 안에 글꼴 로드

블록 테마에서 theme.json 스타일 지정을 위한 중심 파일이며 글꼴을 설정하는 곳입니다. 그렇게 하려면 settings 및 typography 에서 fontFamilies 찾으십시오.

블록 테마에서 다음 값을 사용하여 새 글꼴이 추가됩니다.

• fontFamily — CSS에서 사용될 새 글꼴의 이름입니다. 즉, 대체 글꼴을 포함할 수 있습니다.
• name — 워드프레스 백엔드에 표시될 글꼴의 이름입니다.
• slug — WordPress가 CSS 사용자 정의 속성에서 사용하는 고유 식별자입니다.
• fontFace — 이것은 CSS @font-face 규칙에 해당하며 실제로 글꼴을 대기열에 넣는 것입니다.

작동하기 위해 fontFace 다음과 같은 몇 가지 다른 정보가 포함되어 있습니다.

• fontFamily — 글꼴의 이름(다시).
• fontWeight — 공백으로 구분된 사용 가능한 글꼴 두께 목록입니다.
• fontStyle (선택 사항) — 여기에서 font-style 속성을 설정할 수 있습니다(예: normal 또는 italic .
• fontStretch (선택 사항) — 예를 들어 압축 버전이 있는 글꼴 모음의 경우입니다.
• src — 로컬 글꼴 파일의 경로입니다.

예를 들어 서로 다른 스타일을 로드하기 위해 fontFace 에 여러 글꼴 파일을 포함할 수 있습니다. 그렇게 하려면 중괄호와 쉼표로 구분하십시오. 위와 동일한 글꼴 예제에 대한 모양은 다음과 같습니다.

 "fontFamilies": [ { "fontFamily": "Advent Pro", "slug": "advent-pro", "fontFace": [ { "fontFamily": "Advent Pro", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v19-latin-regular.woff" ] }, { "fontFamily": "Advent Pro", "fontStyle": "italic", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v19-latin-italic.woff" ] } ] } ]

Gutenberg 플러그인이 활성화된 상태에서 functions.php 내부의 wp_register_webfonts() 대신 사용할 수도 있습니다. 이는 Core에 아직 없는 이 목적을 위한 새로운 PHP 함수입니다. 위와 동일한 인수를 사용하지만 PHP 형식입니다.

블록 테마의 로컬 글꼴: 플러그인 솔루션

마지막으로 플러그인을 사용하여 WordPress 블록 테마에서 글꼴을 로컬로 호스팅할 수도 있습니다. 그 중 하나는 Create Block Theme 플러그인입니다. 설치하고 활성화하면 모양 메뉴에 새로운 테마 글꼴 관리 옵션이 추가됩니다.

여기에서 현재 테마에 포함된 글꼴 모음을 미리 보고 전체 글꼴 모음 또는 단일 스타일을 제거할 수 있습니다.

더 흥미로운 것은 상단에 Google 글꼴 추가 및 로컬 글꼴 추가 라는 버튼이 있습니다. Google 글꼴 옵션부터 시작하겠습니다.

그것을 사용하는 것은 정말 쉽습니다. 해당 버튼을 클릭하고 상단의 드롭다운 목록에서 원하는 글꼴을 선택합니다. 그런 다음 테마에 추가할 글꼴 두께 및 스타일 상자를 선택합니다. 마지막으로 하단의 테마에 Google 글꼴 추가를 클릭합니다.

플러그인은 선택한 글꼴을 자동으로 다운로드하고 포함하여 블록 및 사이트 편집기에서 사용할 수 있도록 합니다.

로컬 글꼴 옵션은 매우 유사하게 작동합니다.

여기서 차이점은 하드 드라이브에서 글꼴 파일을 업로드하고 테마가 무엇인지 알 수 있도록 글꼴의 이름, 스타일 및 두께를 제공해야 한다는 것입니다(플러그인도 자동으로 이 정보를 인식하려고 시도함). 즉, 글꼴 파일을 하나씩 업로드해야 합니다. 그러나 전반적으로 매우 간단합니다.

WordPress에서 로컬로 글꼴을 호스팅할 준비가 되셨습니까?

사용자 지정 글꼴은 웹사이트를 멋지게 꾸밀 수 있는 인기 있는 방법입니다. 그러나 WordPress에서 로컬로 호스팅하는 기능은 성능, 법적 및 기타 이유로 인해 점점 더 중요해지고 있습니다.

위에서 여러 가지 방법을 살펴보았습니다. 수동으로 또는 플러그인을 사용하여 달성할 수 있습니다. 전반적인 원리는 매우 유사하지만 블록 또는 클래식 테마를 사용할 때도 차이가 있습니다. 우리는 당신이 이제 그 일을 감당할 수 있기를 바랍니다.

WordPress에서 글꼴을 로컬로 호스팅하도록 어떻게 선택하셨습니까? 의견 섹션에서 알려주십시오!