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

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

更新日時 4月 10, 2019

対象製品

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

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

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

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

@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 を置換した後、スタイルシートでカスタムフォントファミリーを参照できます。以下は、カスタムのフォントがページの本文に適用される最終コードの例です。

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