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