Account Engagement でのカスタムフォントの使用

Account Engagement（旧 Pardot）には、カスタムフォントを追加するための直接的な機能は用意されていません。

ただし、Account Engagement アセット内でカスタムフォントを参照するために利用できる外部の方法がいくつかあります。

これは高度なトピックであり、ウェブサーバー設定に関する十分な理解を前提としています。この記事は参考情報として提供されています。Account Engagement では、この設定に関するこれ以上のサポートを提供していません。

Firefox および Internet Explorer の新しいバージョンでは、サードパーティドメインからリクエストされたカスタムフォントへのアクセスがブロックされます。

たとえば、example1.com にあるカスタムフォントを example2.com が使用しようとするとブロックされます。

これらの保護機能により、ウェブサーバー上にあるフォントが Account Engagement のフォームやランディングページで使用されるのが防がれます。

この記事では、Apache の設定変更を通じて、フォントを使用するためのアクセス権限を Account Engagement に付与する方法を説明します。

また、Adobe Fonts、fonts.com、typography.com のユーザー向けに、これらのサービスを通じて権限を付与する方法も説明します。

.htaccess の設定

ルート Web ディレクトリまたはフォントファイルを提供しているディレクトリ内の .htaccess ファイルに次のコードを追加します。

<FilesMatch ".(otf|ttf|eot|woff)$">
SetEnvIf Origin "^http(s)?://(.+.)?(pardot.com|yourdomain.com)$" origin_is=$0
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

yourdomain.com は、Account Engagement トラッカードメインのプライマリの部分で置き換える必要があります。たとえば、トラッカードメインが www2.company.com である場合、設定で company.com を使用します。

Adobe Fonts の設定

こちらの手順に従ってください。
https://helpx.adobe.com/fonts/user-guide.html/fonts/using/add-fonts-website.ug.html

typography.com の設定

typography.com を使用してフォントを提供している場合、次の手順で簡単に Account Engagement に許可を与えることができます。
○ typography.com にログインします。
○ Account Engagement で使用したいフォントが含まれているプロジェクトを表示します。
○ [Domains (ドメイン)] をクリックし、[Add a domain (ドメインの追加)] をクリックします。
○ *.pardot.com を追加します。
○ [Save Changes (変更を保存)] をクリックします。
ドメインリストに *.yourdomain.com が含まれていない場合は、[Add a domain (ドメインの追加)] をクリックし、Account Engagement トラッカードメイン全体を追加します。アプリケーション内または HTTPS で提供される Account Engagement ページでプレビューするには、Account Engagement ドメインを追加する必要があります。
○ [Save Changes (変更を保存) をクリックします。

注: ワイルドカードを使用せず、Account Engagement ドメインに個別に許可を与えたい場合は、go.pardot.com、pi.pardot.com、preview.pardot.com を追加する必要があります。

フォームおよびランディングページ内のカスタムフォント

Account Engagement にフォントを使用する許可を与えると、[レイアウトテンプレート] からフォームやランディングページにフォントを読み込めるようになります。いくつかの方法がありますが、ここでは外部スタイルシートを使用する方法と @font-face 宣言を使用する方法を紹介します。

○ 外部スタイルシートの参照

カスタムフォントが含まれる CSS スタイルシートがすでに存在する場合、<head> タグ内でレイアウトテンプレートの [レイアウト] タブに参照を追加できます。

○ @font-face 宣言

@font-face 宣言を使用すると、レイアウトテンプレートの [レイアウト] タブに直接カスタムフォントを追加することができます。<style> タグ内で、フォント名と場所を指定します。次に、Account Engagement フォーム上の要素にフォントを適用するには、font-family または font ショートハンドプロパティを使用してフォント名を参照します。

body { font-family: "SampleFont", sans-serif; } #pardot-form { font: normal 13px/120% "SampleFont", sans-serif; }

注: 現時点では、ランディングページエディタの [ストックテンプレート] オプションでカスタムフォントを使用することはできません (ドラッグ & ドロップビルダー)。

メールのカスタムフォント (Google Fonts を含む)

HTML メールで使用するカスタムフォントをインポートできるメールクライアントもいくつかあります。フォントのホストが、次のように、HTML の <head> セクションの既存の <style> タグ内で、CSS @import コールを使用してフォントをインポートする機能をサポートしている必要があります。

<style>

@import url(https://domain.com/path/to/your/font/font-family-name);

</style>

インポートしたフォントを使用するには、次のようにセクションの style 属性で font-family プロパティを使用します。

<p style="font-family: font-family-name,backup-font-family;">

注: @import によるインポートがサポートされていない場合は、テキストの backup-font-family を指定して、受信者のメールクライアントに表示するフォントを指示することができます。現時点では、@import によるインポートは、iOS Mail、Apple Mail、Android のデフォルトメールクライアント、Mozilla Thunderbird でサポートされています。カスタムフォントの表示はメールクライアントによって異なるので、メール内でカスタムフォントに依存することはお勧めしません。メールでのカスタムフォントの使用は、重要なブランディング要素というより、機能強化と考えてください。