COS-General

HubSpotにカスタムフォントを実装するにはどうすればよいですか。

更新日時 November 29, 2016

標準的なWebフォントやGoogleフォントのようなフォントライブラリを使用する代わりに、ファイルマネージャーでフォントファイルをホスティングし、CSSファイルで参照することができます。

ブラウザ全体でフォントを読み込むためには、同じフォントの複数のフォーマットが必要になります。信頼性の高い結果を得るためには、少なくとも.woff、.ttf、.eot形式のフォントが必要です。この手順はウェブページのコンテンツの場合であり、Eメールテンプレートには適用されません。現在、ウェブで合法的に使用できるフォントを使用している場合は、Font Squirrelの変換ツールを使用して、様々なファイル形式を作成することができます。3種類のフォントファイルが用意できたら、次の手順に従ってください。

  • [コンテンツ] > [ファイルマネージャー]の順に進みます。
  • [ファイルをアップロード...]をクリックし、アップロードするフォントファイルを選択します。
  • [コンテンツ] > [デザインマネージャー]の順に進みます。
  • ページやブログのテンプレートに適用されているCSSを開きます。
  • CSSファイルの最上部に、次の@font-faceコードを貼り付けます。

@font-face {
  font-family: 'Your Font Name';
  src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');
}

次に、ホスティングされているフォントを参照するため、font-faceコードのブロックのフォントURLを置き換える必要があります。

  • そのコードを貼り付けたら、「font-family」をフォントの名前に置き換えます。
  • [アクション] > [ファイルを挿入]の順にクリックします。
  • フォントファイルを見つけます。
  • 最良のレンダリング結果を得るために、コンテンツをホスティングしているドメインを選びます。
  • [ファイルを使用]をクリックします。
ユーザー追加画像
ユーザー追加画像

コードの「font-family」とフォントのソースURLを置き換えたら、CSSでカスタムフォントファミリーの参照を開始できます。次に示すのは、カスタムフォントがページの本文に適用されている最終的なコードの表示例です。

@font-face {
  font-family: 'Jurassic Park';
  src: url('http://designers.hubspot.com/hubfs/jurassic-park.eot?') format('eot'), url('http://designers.hubspot.com/hubfs/jurassic-park.woff') format('woff'), url('http://designers.hubspot.com/hubfs/jurassic-park.ttf') format('truetype');
}

body{
font-family: 'Jurassic Park';
}