가입 양식에서 사용자 정의 글꼴을 사용하는 방법

학습 내용

커스텀 글꼴을 사용해 가입 양식을 디자인하여 고객이 강력한 브랜드 아이덴티티를 경험하고 사이트의 나머지 부분과 일관성을 유지하는 방법을 알아보세요.

브랜드에서 가입 양식 편집기에서 사용할 수 없는 글꼴을 사용한다면, 양식에 적용하기 전에 Klaviyo 글꼴 라이브러리에 먼저 추가해 주세요. Google 글꼴, Adobe 글꼴 또는 가져온 글꼴 파일을 추가할 수 있어요.

주요 용어

• 사용자 정의 글꼴
  Klaviyo 편집기에서 기본적으로 제공되지 않는 모든 글꼴입니다. 여기에는 다음이 포함됩니다.
  • Google 글꼴
  • Adobe 글꼴
  • 가져온 글꼴
• 웹 안전 글꼴
  대부분의 기기에 로컬로 저장되므로 외부 소스에서 로드하여 표시할 필요가 없는 글꼴입니다.
• 대체 글꼴
  페이지에서 기본 글꼴을 로드할 수 없는 경우 사용되는 웹 안전 글꼴입니다.

계정에 맞춤 글꼴 추가하기

계정에 Google 글꼴, Adobe 글꼴 또는 가져온 글꼴을 추가할 수 있어요. 먼저 글꼴 라이브러리를 여세요:

1. 기본 메뉴에서 콘텐츠 > 미디어 및 브랜드로 이동한 다음 브랜드 탭을 선택해 주세요.
2. 사이드바에서 글꼴을 선택해 주세요. 대신 사이드바에 스타일이 표시되면, 이를 선택한 다음 글꼴 섹션을 찾으세요.

Google 글꼴 추가

Google 글꼴을 추가하는 방법:

1. 글꼴 추가를 클릭한 다음 Google 글꼴을 선택해 주세요.
2. 사용 가능한 글꼴을 보려면 Google Font 드롭다운을 여세요. 또한 Google fonts를 찾아보면서 옵션을 비교할 수도 있어요. 글꼴이 이미 라이브러리에 있으면, 다시 추가하는 대신 해당 글꼴을 편집하세요.
3. 원하는 글꼴을 선택해 미리 보기와 사용 가능한 같은 이메일의 다른 버전(예: 굵게 또는 기울임꼴)을 확인하세요.
   • 글꼴 같은 이메일의 다른 버전을 열고 사용할 굵기와 스타일을 선택해 주세요. Normal 400은 필수이며 제거할 수 없어요.
4. 대체 글꼴을 선택하세요.
5. 저장을 클릭합니다. 추가한 글꼴은 글꼴 섹션에 표시돼요.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Fonts 섹션에서 계정에 추가된 글꼴을 확인할 수 있어요. 글꼴을 편집하거나 삭제하려면 옆에 있는 점 3개를 선택합니다.

Adobe 글꼴 추가하기

Adobe 글꼴을 추가하는 방법:

1. Adobe Fonts로 이동합니다.
2. 사용할 글꼴을 검색한 다음 선택해 주세요.
3. 코드 아이콘(</>)을 클릭하거나 웹 프로젝트에 추가를 선택해 주세요.
4. 기존 웹 프로젝트를 선택하거나 새 웹 프로젝트를 만드세요. 포함할 글꼴 굵기와 스타일을 선택한 다음 프로젝트를 저장해 주세요.
5. 프로젝트의 임베드 코드에서 https://use.typekit.net/ (으)로 시작하는 스타일시트 URL을 복사해 주세요. .css 확장자를 포함할 수 있습니다.

This content requires Functional cookies to be enabled.

Update Cookie Settings

6. Klaviyo에서 글꼴 라이브러리로 돌아가세요. 글꼴 추가를 클릭하고 Adobe Fonts를 선택한 다음, URL을 Adobe Fonts CSS 주소에 붙여넣으세요.
7. 글꼴 보기를 클릭한 다음, 프로젝트의 각 새 글꼴 패밀리에 대해 대체 글꼴을 선택해 주세요. 계정에 이미 있는 글꼴에는 체크 표시가 있으며, 기존 대체 글꼴이 표시돼요.

This content requires Functional cookies to be enabled.

Update Cookie Settings

8. 저장을 클릭합니다.

글꼴을 추가하면 Fonts 섹션에 목록으로 표시돼요. 글꼴을 수정하려면 옆에 있는 점 3개를 선택해 주세요.

가져온 글꼴 추가

타사에서 호스팅되지 않는 맞춤 글꼴을 구매하거나 다운로드한 경우에도 Klaviyo 양식에서 사용할 수 있어요. 먼저, Klaviyo에서 액세스할 수 있는 위치(예: 사이트 자산 또는 글꼴 호스팅 플랫폼)에 글꼴 파일을 호스팅 하세요. 수신자의 기기에서 글꼴에 액세스할 수 있도록 Access-Control-Allow-Origin header을(를) *(으)로 설정해 출처 간 리소스 공유(CORS) 사용을 활성화해 주세요.

가져온 글꼴을 추가하려면:

1. 글꼴 추가를 클릭한 다음 사용자 지정 글꼴을 선택하세요.
2. 사용자 지정 글꼴 이름에 이름을 입력하세요. 글꼴 라이브러리에 아직 없는 이름을 선택하세요.
3. 글꼴 파일의 소스 URL을 입력한 다음, 글꼴 두께와 글꼴 스타일을 선택해 주세요. 파일 이름이 .woff, .woff2, .ttf 또는 .eot(으)로 끝나는 접근 가능한 HTTPS URL을 사용해 주세요. SVG 파일은 지원되지 않습니다.
4. 선택 사항: 같은 이메일의 다른 버전을 더 추가하려면 글꼴 같은 이메일의 다른 버전 추가를 클릭한 다음 소스 URL, 굵기, 스타일을 입력해 주세요. 각 같은 이메일의 다른 버전마다 서로 다른 소스 URL과 서로 다른 weight/style 조합을 사용해 주세요.
5. 대체 글꼴을(를) 선택해 주세요.
6. 글꼴을 글꼴 섹션에 추가하려면 저장을 클릭해 주세요.

This content requires Functional cookies to be enabled.

Update Cookie Settings

글꼴에서 계정으로 가져온 글꼴을 확인할 수 있어요. 글꼴을 삭제하거나 편집하려면 옆에 있는 점 3개를 선택해 주세요.

글꼴 편집

기존 맞춤 글꼴을 편집하려면:

1. 콘텐츠 > 미디어 및 브랜드로 이동한 다음 브랜드를 선택합니다. 사이드바에서 글꼴을 선택하거나, 사이드바에 표시된 옵션이 그 경우에는 스타일을 선택한 다음 글꼴을 찾습니다.
2. 글꼴 섹션에서 편집하려는 글꼴을 찾으세요.
3. 글꼴 옆의 점 3개를 클릭해 주세요.
4. 글꼴 편집을 선택하세요. 여기에서 다음을 할 수 있어요:
   • 모든 사용자 지정 글꼴에 대한 대체 글꼴을 편집하세요.
   • Google 글꼴의 경우 글꼴 변형을 선택해 두께와 스타일을 추가하거나 제거하세요. 일반 400이(가) 선택된 상태로 유지되어야 해요.
   • Klaviyo에서 호스팅되는 글꼴을 포함해 가져온 글꼴의 경우, 같은 이메일의 다른 버전의 소스 URL, 굵기 또는 스타일을 수정하세요. 글꼴 같은 이메일의 다른 버전 추가를 사용해 다른 파일을 추가하거나, 같은 이메일의 다른 버전 옆의 휴지통 아이콘을 클릭해 삭제하세요. 같은 이메일의 다른 버전을 최소 1개 유지해 주세요.

1. Klaviyo에서 글꼴 편집을 완료했으면 저장을 클릭해 주세요.

글꼴 삭제

글꼴을 삭제하려면:

1. 콘텐츠 > 미디어 및 브랜드로 이동한 다음 브랜드를 선택합니다. 사이드바에서 글꼴을 선택하거나, 사이드바에 표시된 옵션이 그 경우에는 스타일을 선택한 다음 글꼴을 찾습니다.
2. 삭제하려는 글꼴에서 점 3개를 클릭한 다음 삭제를 선택해 주세요. 확인 대화상자가 열려요. 삭제한 글꼴을 더 이상 로드할 수 없으면 해당 글꼴을 사용하는 양식은 대체 글꼴로 표시돼요.

3. 삭제를 선택해 주세요.

사용자 지정 글꼴을 삭제하면, 해당 글꼴을 사용하는 양식은 사용자 지정 글꼴을 더 이상 불러올 수 없을 때 대체 글꼴이 표시돼요. 같은 글꼴 패밀리를 다시 추가하면, 해당 양식에서 다시 사용할 수 있어요.

가입 양식 빌더에서 사용자 정의 글꼴 사용하기

가입 양식에서 맞춤 글꼴을 사용하려면 양식 미리보기에서 텍스트를 편집하기만 하면 돼요:

1. 가입 양식 탭으로 이동합니다.
2. 수정하려는 양식을 찾은 다음 옆에 있는 점 3개를 클릭하고 편집을 선택해 주세요.
3. 양식 미리보기에서 편집할 텍스트를 선택하세요.
4. 텍스트 편집기에서 서식을 지정할 텍스트를 선택해 강조 표시해 주세요.
5. 텍스트 편집기에서 글꼴 드롭다운을 사용해 내 글꼴 아래에서 사용자 지정 글꼴과 같은 이메일의 다른 버전을 선택해 주세요.

1. 변경 사항이 만족스러우면 게시 또는 예약을 클릭해 주세요.
2. 지금 게시 옵션을 선택해 주세요. 표시된 차단 알림을 모두 해결한 다음, 변경 사항을 즉시 적용하려면 지금 게시 버튼을 클릭해 주세요.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Klaviyo.js의 영향을 받는 사이트 글꼴

Klaviyo 온사이트 트래킹 (Klaviyo.js) 웹사이트에 Klaviyo 가입 양식을 표시하려면 수동으로 설치하거나 전자상거래 연동을 통해 설치해야 합니다. Klaviyo.js는 글꼴 라이브러리에 저장된 Google 글꼴과 가져온 글꼴의 같은 이메일의 다른 버전, 그리고 추가한 각 Adobe 웹 프로젝트의 스타일시트를 로드합니다. 웹사이트에서 동일한 글꼴 패밀리를 사용하는 경우, 이러한 정의가 머리글의 굵기 같은 모양에 영향을 줄 수 있습니다.

Klaviyo.js에 의해 글꼴이 변경된 경우 이를 해결하는 두 가지 옵션이 있습니다. 다음 중 하나를 선택할 수 있습니다.

• Klaviyo 글꼴 라이브러리에서 관련 글꼴을 삭제해 주세요. 삭제된 글꼴을 더 이상 불러올 수 없으면 해당 글꼴을 사용하는 폼에는 대체 글꼴이 표시돼요.
• 웹사이트의 CSS 및 글꼴 정의를 업데이트해서 Klaviyo.js에서 로드하는 글꼴 패밀리, 굵기, 스타일과 충돌하지 않도록 해 주세요.

추가 자료