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

학습 내용

사용자 정의 글꼴로 가입 양식을 디자인하여 고객이 강력한 브랜드 정체성을 경험하고 사이트의 다른 부분과 일관성을 유지할 수 있도록 하는 방법을 알아보세요.

가입 양식을 아름답게 디자인하는 것은 가입자가 양식의 목표를 달성하도록 유도하는 데 가장 중요합니다. 브랜드에서 가입 양식 편집기에서 기본적으로 사용할 수 없는 글꼴을 사용하는 경우 이러한 사용자 지정 글꼴을 추가하면 양식을 사이트의 나머지 부분과 일관성 있게 보이게 할 수 있습니다. 글꼴을 추가한 후에는 글꼴을 사용하여 가입 양식을 원하는 대로 사용자 지정할 수 있습니다.

주요 용어

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

계정에 사용자 지정 글꼴 추가하기

왼쪽의 주 메뉴에서 콘텐츠 > 이미지 & 브랜드로 이동합니다. 거기에서 글꼴 탭을 클릭합니다. Google 글꼴, Adobe 글꼴 또는 가져온 글꼴을 추가할 수 있습니다.

Google 글꼴 추가하기

Google 글꼴을 추가하려면 다음과 같이 하세요:

1. 글꼴 이름 드롭다운을 선택하면 계정에 이미 로드한 글꼴을 제외한 사용 가능한 모든 Google 글꼴의 목록을 볼 수 있습니다.
2. 원하는 글꼴을 선택합니다. 선택하면 드롭다운 아래에 글꼴 미리보기와 함께 사용 가능한 변형(예: 굵게, 이탤릭체 등)의 수가 표시됩니다.
   • 1개 이상의 이형 상품을 추가하려면 가능한 이형 상품 수 옆에 있는 화살표를 클릭하고 추가할 글꼴을 선택합니다.
3. 대체 글꼴을 선택합니다.
4. 글꼴 추가를 클릭합니다. 이제 추가된 글꼴이 페이지 하단의 내 글꼴 섹션에 표시됩니다.

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

Adobe 글꼴 추가

Adobe 글꼴을 추가하려면:

1. Adobe 글꼴로 이동합니다.
2. Adobe 글꼴 링크를 검색한 다음 글꼴을 선택합니다.
3. 글꼴 이름 옆의 코드 아이콘을 클릭합니다.
4. 필요한 경우 새 프로젝트 이름을 입력한 다음 저장을 클릭합니다.
5. 다음 모달에서 추가하려는 글꼴의 https://use.typekit.net URL을 복사합니다. .css 를 복사할 때 URL의 일부로 추가합니다.
   
6. Klaviyo 으로 다시 이동하여 URL을 CSS 주소 필드에 붙여넣습니다.
7. 계속을 선택한 다음 업로드하려는 글꼴에 대한 대체 글꼴을 선택합니다. 계정에서 이미 글꼴을 사용할 수 있는 경우 글꼴 옆에 녹색 확인 표시가 표시되고 기존 대체 글꼴이 표시됩니다.
   
8. 글꼴 추가를 선택합니다.

글꼴을 추가하면 페이지 하단의 내 글꼴 섹션에 글꼴이 나열됩니다. 이 섹션에서 글꼴을 편집하려면 글꼴에 있는 점 3개를 선택합니다.

가져온 글꼴 추가하기

타사 소스에서 호스팅하지 않는 사용자 정의 글꼴을 구매하거나 다운로드한 경우에도 클라비요 형태로 사용할 수 있습니다. 먼저 클라비요에서 액세스할 수 있는 위치(예: 사이트의 에셋 또는 글꼴 호스팅 플랫폼)에 글꼴 파일을 호스팅합니다. 받는 사람의 디바이스에서 글꼴에 액세스할 수 있도록 Access-Control-Allow-Origin 헤더를 *로 설정하여 CORS(출처 간 리소스 공유)를 사용하도록 설정해야 합니다.

가져온 글꼴을 추가하려면

1. 글꼴 이름을 지정합니다.
2. 글꼴 무게, 스타일 및 소스 URL을 지정합니다. 소스 URL은 WOFF, WOFF2, TTF, EOT 또는 SVG로 끝나는 유효한 URL이어야 합니다.
3. 선택 사항입니다: 이형식을 추가하려면 글꼴 이형식 추가를 선택한 다음 이 이형식에 대해 2단계를 반복합니다.
4. 글꼴 추가를 선택하여 내 글꼴 섹션에 이 글꼴을 추가합니다.

내 글꼴에서 내 계정으로 가져온 글꼴을 볼 수 있습니다. 글꼴의 점 3개를 선택하여 글꼴을 삭제하거나 편집할 수도 있습니다.

글꼴 편집

기존 사용자 정의 글꼴을 편집하려면 다음과 같이 하세요:

1. 콘텐츠로 이동 > 이미지 & 브랜드 > 글꼴.
2. 페이지 하단의 내 글꼴 섹션에서 편집하려는 글꼴을 찾습니다.
3. 해당 글꼴의 카드에서 상단 모서리에 있는 점 3개를 클릭합니다.
4. 수정을 선택합니다. 여기에서 다음을 수행할 수 있습니다:
   • 사용자 정의 글꼴의 대체 글꼴을 편집합니다. 
   • Google 및 Klaviyo-호스팅 글꼴의 경우에만 글꼴 변형 수를 선택하여 목록을 확장한 다음 추가하려는 글꼴을 선택하여 선택한 글꼴을 편집하거나 추가합니다.
     
     

     배리언트는 타입킷 링크에 내장되어 있으므로 업로드한 후에는 Adobe 글꼴에 배리언트를 추가할 수 없습니다. Adobe 글꼴에 배리언트를 추가하려면 기존 글꼴을 삭제하고 포함하려는 모든 배리언트가 있는 다른 Typekit 링크를 사용하여 글꼴을 다시 추가해야 합니다.

5. 글꼴 편집이 끝나면 글꼴 업데이트를 선택합니다.

글꼴 삭제

글꼴을 삭제하려면 다음과 같이 하세요:

1. 내 글꼴 섹션으로 이동합니다.
2. 삭제하려는 글꼴에서 점 3개를 클릭한 다음 삭제를 선택합니다. 글꼴 삭제를 선택하면 추가된 글꼴이 양식에 사용되는 경우 추가된 글꼴을 삭제한 후 대체 글꼴이 표시됨을 알리는 모달이 나타납니다.
   
3. 삭제를 선택합니다.

사용자 정의 글꼴이 삭제되면 현재 사용자 정의 글꼴을 사용하는 Klaviyo 내의 모든 양식은 즉시 대체 글꼴로 되돌아갑니다. 글꼴을 다시 추가하면 해당 양식에서 해당 글꼴을 다시 사용하기 시작합니다. 

가입 양식 빌더에서 사용자 지정 글꼴 사용

가입 양식에 사용자 지정 글꼴을 사용하려면 양식 미리 보기에서 텍스트를 편집하기만 하면 됩니다:

1. 가입 양식 탭으로 이동합니다.
2. 편집하려는 양식을 찾아 옆에 있는 점 3개를 클릭한 다음 양식 편집을 선택합니다.
3. 양식 미리 보기에서 편집하려는 텍스트를 선택합니다. 
4. 오른쪽의 텍스트 메뉴에서 텍스트를 강조 표시합니다.
5. 상단의 글꼴 드롭다운을 사용하여 사용자 지정 글꼴을 선택합니다. 계정의 내 글꼴 섹션에 있는 글꼴은 목록 상단에 표시됩니다. 
   

   편집하는 동안 사용자 정의 글꼴은 캔버스(예: 편집 미리 보기)에는 표시되지만 왼쪽 패널에는 표시되지 않습니다. 왼쪽 패널에 사용자 정의 글꼴 대신 대체 글꼴이 표시됩니다.

6. 변경 사항이 만족스러우면 게시를 클릭하여 적용합니다.

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

클라비요 활성 사이트 추적 (Klaviyo.js), 를 수동으로 설치하거나 전자상거래 통합을 통해 설치해야 웹사이트에 클라비요 가입 양식을 게시할 수 있습니다. 일부 글꼴 변형만 로드한 경우 클라비요.js는 사이트에 삽입될 때 라이브러리에 있는 나머지 변형을 로드합니다. 이 과정에서 사이트 헤더의 가중치가 변경되는 등 사이트의 글꼴이 약간 편집될 수 있습니다. 

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

• 클라비요 글꼴 라이브러리에서 관련 글꼴을 삭제합니다. 
• 사이트 헤더의 CSS를 업데이트하여 Klaviyo.js가 추가 변형을 로드할 때 덮어쓰지 않도록 합니다. 
  

  이 옵션을 사용하려면 CSS에 대한 심층적인 지식이 필요하므로 개발자의 도움이 필요할 수 있습니다. 클라비요는 사이트의 CSS 조정에 대한 지원을 제공할 수는 없지만, 방대한 파트너 네트워크를 보유하고 있습니다.

추가 자료 

• 코스: 가입 양식을 사용하여 효과적인 고객 확보 전략 생성
• 사이트에서 사용자 정의 글꼴을 호스팅하는 방법