サイト上でカスタムフォントをホストする方法
このページで学べること
Google やAdobe 以外のフォントを E コマースサイト（EC サイト）にアップロードし、Klaviyo のサインアップフォームにインポートする方法を説明します。 フォントをインポートしてサインアップフォームに適用するには、以下の 2 とおりがあります。
- あなたのウェブサイトで公開しているフォントを使用
- 独自のフォントを公開サーバーでホストし、その URL を使ってサインアップフォームにフォントをインポート
ここでは、カスタムフォントを EC サイトにアップロードしフォームで使用する方法を学びます。なお、メールテンプレートにカスタムフォントを追加する方法については、メールテンプレートにおけるカスタムフォントの使用をご覧ください。
ウェブサイトのフォントを使用する
Klaviyo にフォントをアップロードするには、あなたのサイトの公開 URL を使用します。
なお、Shopfiy ストアは、この方法によるカスタムフォントのホストには対応していません。
- あなたのウェブサイトに移動します。
- お使いのインターネットブラウザに応じて、右クリックして Inspect または Inspect Element を選択します。
- そこから Network > Fonts に移動します。
- ページを再度読み込んでください。
あなたのサイトで使用しているフォントが表示されます。フォントの名前が入力されず、数字や文字の文字列が表示される場合は、プレビュータブからサインアップフォームで使用するフォントを確認してください。 - Name でインポートしたいフォントをクリックします。
- ヘッダータブを選択します。
- 使用したいフォントの URL をコピーしてください。
- Klaviyo のアカウントで、コンテンツ > メディア & ブランド > フォントに進みます。
- [フォントをインポート] をクリックします。
- ソースアドレスに URL を貼り付けてカスタムフォントをアップロードします。
セルフホストのフォントをアップロードする
フォントをまだオンラインで公開していない場合は、使用したいフォントをコンピューターにダウンロードしてください。Klaviyo で使用するには、WOFF、WOFF2、TTF、EOT、または SVG 形式のファイルである必要があります。また、インターネットからフォントファイルをダウンロードする際は、マルウェアが含まれている可能性があるため気を付けてください。あとは以下の手順に従ってください。
- フォントを EC サイトのアセットにアップロードします。 これは、サイトのコード内で行ってください。
- 保存してください。
アセットをサイトに追加する詳しい方法については、各 EC プラットフォームのヘルプセンターをご覧ください。
URLを取得したら Klaviyo に戻り、コンテンツ > メディア & ブランド > フォントを選択してください。ここからフォントの [インポート] タブをクリックし、フォントをインポートします。
Klaviyo.js がサイトフォントに与える影響
Klaviyo サイト上でアクティブのトラッキング（Klaviyo.js）、ウェブサイトで Klaviyo のサインアップフォームを公開するには、手動または E コマース外部連携を通してインストールする必要があります。一部のフォントバリエーションしか読み込んでいない場合、Klaviyo.js は、サイトに挿入される際に、ライブラリ内の残りのバリエーションを読み込みます。このため、このプロセスの過程で、サイトのヘッダーの太さが変わるなど、サイトのフォントが若干編集されることがあります。
Klaviyo.js によってフォントに加えられた変更を解決するには、以下の 2 つの方法があります。
- Klaviyo フォントライブラリから該当するフォントを削除します。
- Klaviyo.js が追加バリエーションを読み込む際に上書きされないように、サイトのヘッダーの CSS を更新します。
CSS の更新には専門的な知識を要するため、開発者の助けが必要になるかもしれません。Klaviyo がお客様のサイトで CSS を調整するお手伝いはできませんが、Klaviyo にはパートナーの幅広いネットワークがあります。適切なパートナーがいるか、ぜひご確認ください。