カスタムフォントをサインアップフォームに使う方法

このページで学べること

カスタムフォントを使用してサインアップフォームをデザインし、お客様が強力なブランド アイデンティティを体験し、サイトの他の部分との一貫性を保てるようにする方法をご紹介します。

美しくデザインされたサインアップフォームを作成することは、フォームの目標を最後まで完了してもらううえで非常に重要です。ブランドでサインアップフォームエディターにネイティブで用意されていないフォントを使用している場合、これらのカスタムフォントを追加するのは、フォームをサイトの他の部分と統一感のある見た目にする簡単な方法です。フォントを追加した後は、必要に応じてフォントを使用し、サインアップフォームをカスタマイズできます。

主な用語

• カスタムフォント
  Klaviyo エディターのデフォルト設定にないフォント。これには以下が含まれます：
  • Google Fonts
  • Adobe フォント
  • インポートされたフォント
• ウェブセーフフォント
  多くのデバイスでローカル保存されているため、外部ソースから読み込まなくても表示できるフォントです。
• フォールバックフォント
  ページがプライマリフォントを読み込めない場合に使用されるウェブセーフフォント。

カスタムフォントをアカウントに追加する

左側のメインメニューから、[コンテンツ] > [画像とブランド]に移動します。そこから、[フォント]タブをクリックします。Google フォント、Adobe フォント、またはインポート済みフォントを追加できます。

Google Fonts を追加する

Google のフォントを追加する手順は以下のとおりです。

1. [フォント名] のドロップダウンを選択すると、利用可能なすべての Google フォントの一覧が表示されます（すでにアカウントに読み込まれているフォントを除く）。
2. 希望するフォントを選択します。選択すると、ドロップダウンの下にフォントのプレビューと、利用可能なバリエーション（太字、斜体など）の数が表示されます。
   • 2 つ以上のバリエーションを追加するには、可能なバリエーション数の横にある矢印をクリックし、追加したいフォントを選択します。
3. フォールバック フォント を選択します。
4. [フォントを追加] をクリックします。追加したフォントは、ページ下部の Your Fonts セクションに表示されます。

This content requires Functional cookies to be enabled.

Update Cookie Settings

Your Fonts セクションでは、アカウントに追加したフォントを確認できます。このセクションでフォントを編集または削除するには、フォントの 3 点リーダーを選択します。

Adobe のフォントを追加する

Adobe のフォントを追加するには以下の手順に従ってください。

1. Adobe Fonts に移動します。
2. Adobe フォントリンクを検索し、フォントを選択してください。
3. フォント名の横にあるコードアイコンをクリックします。
4. 必要に応じて新しいプロジェクト名を入力し、[保存] をクリックします。
5. 次のモーダルで、追加したいフォントの https://use.typekit.net URL をコピーします。コピーする URL には .css を含めないでください。URL の一部として

This content requires Functional cookies to be enabled.

Update Cookie Settings

6. Klaviyo に戻り、URL を [CSS アドレス] フィールドに貼り付けます。
7. [続行] を選択し、アップロードするフォントに対する フォールバックフォント を選択します。フォントがすでにアカウントで利用可能な場合は、フォントの横に緑のチェックマークが表示され、既存のフォールバックフォントが表示されます。

This content requires Functional cookies to be enabled.

Update Cookie Settings

8. フォントを追加を選択します。

フォントを追加すると、ページ下部の あなたのフォント セクションに一覧表示されます。このセクションのフォントを編集するには、フォントの三点リーダーを選択します。

インポートしたフォントを追加する

サードパーティソースでホストされていないカスタムフォントを購入またはダウンロードした場合でも、Klaviyo フォームで使用できます。まず、Klaviyo からアクセスできる場所（たとえば、サイトのアセット内やフォントホスティングプラットフォーム上）に フォントファイルをホスト します。受信者のデバイスからフォントにアクセスできるように、Access-Control-Allow-Origin header を * に設定して Cross-Origin Resource Sharing（CORS）を有効にしてください。

インポートしたフォントを追加するには：

1. フォント名を付けてください。
2. font-weight、style、およびソース URL を指定します。ソース URL は、末尾が WOFF、WOFF2、TTF、EOT、または SVG の有効な URL である必要があります。
3. 任意：追加のバリエーションを追加するには、[フォント バリエーションを追加] を選択し、このバリエーションについて手順 2 を繰り返します。
4. [フォントを追加]を選択して、このフォントを Your Fonts セクションに追加します。

This content requires Functional cookies to be enabled.

Update Cookie Settings

Your Fonts では、アカウントにインポートしたフォントを確認できます。フォント上の 3 つのドットを選択して、フォントを削除または編集することもできます。

フォントを編集する

既存のカスタム フォントを編集するには：

1. [コンテンツ] > [メディア & ブランド] > [フォント] に移動します。
2. ページ下部の フォント セクションで、編集したいフォントを見つけます。
3. そのフォントのカードで、右上隅にある 3 点リーダーをクリックします。
4. [編集] を選択してください。ここから、次の操作が可能です。
   • 任意のカスタムフォントのフォールバックフォントを編集します。
   • Google と Klaviyo でホストされているフォントのみ、[フォントバリエーション数] を選択してリストを展開し、追加したいフォントを選択することで、選択済みのバリエーションを編集または追加できます。
     
     

1. フォントの編集が完了したら、[フォントを更新] を選択します。

フォントを削除する

フォントを削除するには：

1. 自分のフォントセクションに移動します。
2. 削除するフォントで 3 つのドットをクリックし、[削除] を選択してください。フォントを削除することを選択すると、モーダルが表示され、削除するフォントがフォームで使用されている場合は、追加したフォントを削除した後に代替フォントが表示されることが通知されます。
   

3. [削除]を選択します。

カスタムフォントを削除すると、現在 Klaviyo でそのカスタムフォントを使用しているフォームは直ちにフォールバックフォントに戻ります。フォントを再度追加すると、それらのフォームでは再びそのフォントが使用されるようになります。

サインアップフォーム ビルダーでのカスタムフォントの使用

サインアップフォームでカスタム フォントを使用するには、フォームのプレビューでテキストを編集するだけです：

1. [サインアップフォーム] タブに移動します。
2. 編集するフォームを見つけ、横にある 3 つのドットをクリックしてから、[フォームを編集] を選択します。
3. フォームプレビューで、編集したいテキストを選択してください。
4. 右側の [Text] メニューで、テキストをハイライトします。
5. 上部のフォントドロップダウンを使用して、カスタムフォントを選択します。アカウントの Your Fonts セクションのフォントはリストの先頭に表示されますのでご注意ください。
   

1. 変更に問題がなければ、[公開] をクリックして反映します。

This content requires Functional cookies to be enabled.

Update Cookie Settings

Klaviyo.js がサイトフォントに与える影響

Klaviyo サイト上でアクティブのトラッキング（Klaviyo.js）、ウェブサイトで Klaviyo のサインアップフォームを公開するには、手動または E コマース外部連携を通してインストールする必要があります。一部のフォントバリエーションしか読み込んでいない場合、Klaviyo.js は、サイトに挿入される際に、ライブラリ内の残りのバリエーションを読み込みます。このため、このプロセスの過程で、サイトのヘッダーの太さが変わるなど、サイトのフォントが若干編集されることがあります。

Klaviyo.js によってフォントに加えられた変更を解決するには、以下の 2 つの方法があります。

• Klaviyo フォントライブラリから該当するフォントを削除します。
• Klaviyo.js が追加バリエーションを読み込む際に上書きされないように、サイトのヘッダーの CSS を更新します。
  

その他のリソース