標準的なWebフォントやGoogleフォントのようなフォントライブラリを使用する代わりに、ファイルマネージャーでフォントファイルをホスティングし、スタイルシートで参照することができます。
すべてのブラウザーを通じてフォントを読み込むには、同じフォントの複数の形式が必要になります。最低限、.work、.ttf、.eotバージョンのフォントを含めることを推奨します。ウェブ上で正当に使用できるフォントを使用している場合は、フォントSquirrelの変換ツールを使用してさまざまなファイル形式を生成できます。さまざまなスタイルや重み（斜体、太字、細字など）について、追加の@font-faceルールを作成する必要があります。
注意：これらの手順は、ブログ記事やウェブページテンプレートでのみ動作し、Eメールテンプレートでは動作しません。ほとんどのEメールクライアントで、カスタムフォントがサポートされていないためです。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- ブログまたはページのテンプレートに適用するスタイルシートを開きます。
- スタイルシートの上部に、次の@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を置き換えます。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［ファイル］の順に進みます。
- ［ファイルをアップロード］をクリックして、アップロードするフォントファイルを選択します。最適なレンダリング結果を得るには、[ファイル URL] ドロップダウンメニューをクリックし、サイトがホストされているドメインを選択します。
- ファイルマネージャーダッシュボードで、フォントファイルの名前をクリックします。
- 右側のペインで [URL をコピー] をクリックして、スタイルシートに追加するフォントの URL を取得します。
コードでフォントファミリーとフォントソース URL を置換した後、スタイルシートでカスタムフォントファミリーを参照できます。以下は、カスタムのフォントがページの本文に適用される最終コードの例です。
/* Jurassic Park Normal *//* Jurassic Park Bold */
@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');
}
@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';
}