お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
CMS-General

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

更新日時 1月 15, 2019

対象製品

Marketing Hub Professional, Enterprise
Basic
HubSpot CMS

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

すべてのブラウザーを通じてフォントを読み込むには、同じフォントの複数の形式が必要になります。最も信頼性の高い結果を得るには、最低限、.work、.ttf、&、.eotバージョンのフォントが必要です。さまざまなスタイルや重み(斜体、太字、細字など)について、追加の@font-faceルールを作成する必要があります。

これらの手順は、ウェブページコンテンツでのみ動作し、Eメールテンプレートでは動作しません。ほとんどのEメールクライアントではカスタムフォントがサポートされていないためです。 

ウェブ上で法的に使用できるフォントを使用している場合は,フォントSquirrelの変換ツールを使用してさまざまなファイル形式を生成できます。フォントファイルがすべて揃ったら、次の手順に従ってください。

@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を置き換える必要があります。

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [ファイル]の順に進みます。
  • [ファイルをアップロード]をクリックして、アップロードするフォントファイルを選択します
  • 最適なレンダリング結果を得るには、ドロップダウンを使用して、ファイルURLについてサイトがホストされているドメインを選択します。
  • ファイルマネージャーダッシュボードからファイルをクリックし、[URLをコピー]をクリックして、スタイルシートに追加するフォントのURLを取得します。

file-manager-change-domain


コード内のフォントファミリやフォントソースURLを置き換えたら、CSSでカスタムフォントファミリを参照する準備ができました。以下は、カスタムのフォントがページの本文に適用される最終コードの例です。

/* Jurassic Park Normal */
@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');
}

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

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