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

ブログ記事またはページでカスタムフォントを使用する

更新日時 2021年 8月 4日

対象製品

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Marketing Hub Basic(旧製品)

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

カスタムフォントを追加しても、HubSpotエディターのフォント スタイル オプションにはフォントが追加されません。代わりに、CSSを使用してページのテキスト要素のスタイルを設定する必要があります。

すべてのブラウザーを通じてフォントを読み込むには、同じフォントの複数の形式が必要になります。最低限、.work、.ttf、.eotバージョンのフォントを含めることを推奨します。ウェブ上で正当に使用できるフォントを使用している場合は、フォントSquirrelの変換ツールを使用してさまざまなファイル形式を生成できます。さまざまなスタイルや重み(斜体、太字、細字など)について、追加の@font-faceルールを作成する必要があります。 

注:次の場所ではカスタムフォントを使用できません。


スタイルシートにカスタムフォントを追加するには、次のようにしてフォントファイルをファイルツールにアップロードします。 

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

file-manager-change-domain

次に、デザインマネージャーでスタイルシートを開きます。
@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');}
  • your_font_file.xxx?」を、ファイルツールからのURLに置き換えてください。形式ごとに、これを繰り返します。 
  • 'Your Font Name'を、カスタムフォントの名前に置き換えます。 

コードでフォントファミリーとフォントソースURLを置換した後、スタイルシートでカスタムフォントファミリーを参照できます。以下の最終コードの例では、カスタムフォントがページの本文に適用されています。

/* 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';
}