HubSpotでのフォントの使用

HubSpotのフォントは、コンテンツタイプやフォントタイプによって異なる方法で使用できます。一部の既定のフォントは、すべてのコンテンツエディターで使用できます。ウェブフォントとカスタムフォントは、テーマ設定、スタイルシート、カスタムモジュール、またはコードテンプレートに追加することが必要な場合があります。

始める前に

HubSpotでフォントを使用する前に、要件と考慮事項を確認してください。

制限事項と考慮事項について

• 全てのアカウントで全てのコンテンツタイプが利用できるわけではありません。ご契約のサブスクリプションで利用可能なコンテンツタイプを確認するには、 製品 & サービスカタログをご確認ください。
• 以下の表を確認して、各コンテンツタイプで使用できるフォントオプションを理解してください。

リッチテキストモジュールで既定のフォントを使用する

デフォルトのフォントはHubSpotコンテンツ全体でサポートされていますが、利用可能なオプションと適用できる場所はコンテンツタイプによって異なります。

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［ウェブサイトページ］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［ウェブサイトページ］に直接移動します。
   • ランディングページ：HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［ランディングページ］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［ランディングページ］に直接移動します。
   • ブログ：HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［ブログ］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞ ［ブログ］に直接移動します。
   • Eメール：HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞［Eメール］に移動します。アカウントに［その他］が表示されない場合は、［マーケティング］＞［Eメール］に直接移動します。
2. コンテンツの名前をクリックします。
3. コンテンツエディターで、リッチ テキスト モジュールをクリックし、編集したいテキストをハイライトします。 
4. リッチ テキスト ツールバーで、［フォント］ドロップダウンメニューをクリックし、フォントを1つ選択します。リッチ テキスト モジュールで使用できるフォントは以下のとおりです。

ウェブフォントの使用

ウェブフォントは一部のHubSpotコンテンツでサポートされていますが、リッチ テキスト エディターの[ フォント ]ドロップダウンメニューでは使用できません。コンテンツのタイプに応じて、テーマ設定、スタイルシート、カスタムモジュール、またはコードテンプレートでウェブフォントを適用できます。 

開発者は フォントフィールド を使用してテーマやカスタムモジュールにウェブフォントを追加できます。この方法でウェブフォントを追加すると、サードパーティーのサービスから読み込まれるのではなく、HubSpotによってコンテンツのドメインに直接読み込まれます。

Googleフォント などのサードパーティーサービスを利用するには、フォントのインポートコードをコピーしてコンテンツのスタイルシートに貼り付け、CSSでフォントを適用します。

1. fonts.google.comに移動します。
2. 検索バーにフォント名を入力します。 
3. フォント名をクリックして、インポート可能なスタイルのリストを表示します。
4. 右上の[フォントを取得]をクリックします。
5. 右上にある[埋め込みコードを取得]をクリックします。
6. 右側の列で、[ ウェブ ]タブの [@import ]を選択します。
7. @import コードを、<style>タグを除いて、@importコードをコピーしてください。
8. CSSルールを設定するための CSSクラスコード をコピーします。 

9. Google Fontsからコードをコピーした後、HubSpotのコンテンツにフォントを追加できます。 

• • スタイルシートでのGoogleフォントの使用
  • カスタムコードEメールテンプレートでのGoogleフォントの使用
  • CTAでのGoogleフォントの使用（旧）
  • フォームでのGoogleフォントの使用
  • カスタムモジュールでのGoogleフォントの使用

スタイルシートでのGoogleフォントの使用

1. Google Fontsからフォントの@importコードをコピーします。
2. HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［デザインマネージャー］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［デザインマネージャー］に直接移動します。
3. ファインダーで、コンテンツに使用されているスタイルシートを開きます。
4. @import コードをスタイルシートの1 行目に貼り付けてください。 
5. スタイルシートの適切なセレクターに、CSSルールを設定するコードを追加します。
6. 右上の［変更を公開］をクリックして、変更内容を公開します。 

カスタムコードEメールテンプレートでのGoogleフォントの使用

Googleフォントは、Apple MailといくつかのEメールクライアントでサポートされていますが、幅広いサポートは限られています。一般的なEメールクライアントでサポートされるのはデフォルトのウェブフォントのみです。クラシックEメールエディターで使用されるデフォルトフォントを選択することについて、さらに詳しくご覧ください。 

カスタムコードEメールテンプレートにGoogle Fontを追加するには: 

1. Google Fontsからフォントの@importコードをコピーします。
2. HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［デザインマネージャー］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［デザインマネージャー］に直接移動します。
3. ファインダーで、カスタムコードEメールテンプレートを開きます。
4. テンプレートの<head>セクションで、<style>....</style>タグの間に@importコードを貼り付けます。 
5. テンプレートの<body>セクションに、インラインスタイルでカスタムフォントを追加します。 
6. 右上の［変更を公開］をクリックして、変更内容を公開します。 

CTAでのGoogleフォントの使用（旧）

1. 該当するフォントのCSSルールを設定するGoogleのコードをコピーします。
2. HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞ ［CTA］の順に進みます。アカウントに［その他］が表示されない場合は、［マーケティング］＞［CTA］に直接移動します。
3. CTAにマウスポインターを合わせ、［アクション］>［編集］をクリックします。 
4. 右側のパネルで［詳細オプション］をクリックします。 
5. テキストボックスに、そのフォントのCSSルールを設定するGoogleのコードを貼り付けます。 
6. 右下の［次へ］をクリックします。次に［保存］をクリックします。

フォームでのGoogleフォントの使用

1. HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞［フォーム］の順に進みます。アカウントに［その他］が表示されない場合は、［マーケティング］＞［フォーム］に直接移動します。
2. フォーム名の上にマウスポインターを置き、[アクション] > [フォームを編集] または [ 新規フォームを作成] をクリックします。
3. フォームエディターで［スタイルとプレビュー］タブをクリックします。 
4. 左にあるサイドバーメニューで［セクションをスタイル設定］をクリックします。
5. 「テキスト」セクションで、［フォントファミリー］ドロップダウンメニューをクリックし、Googleフォントを選択します。 
6. 右上の［更新］または［公開］をクリックして、変更内容を公開します。 

カスタムモジュールでのGoogleフォントの使用

注：Eメールテンプレートで使用するカスタムモジュールでは、Googleフォントを使用できません。

1. HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［デザインマネージャー］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［デザインマネージャー］に直接移動します。
2. ファインダーで、カスタムモジュール の名前 をクリックします。カスタムモジュールの作成について詳細をご確認ください。
3. インスペクターで、[フィールド]セクションの[ フィールドの追加]ドロップダウンメニューをクリックし、[ フォント]を選択します。詳しくは、フォントフィールドの取り扱いをご覧ください。

4. 右上の［変更を公開］をクリックして、変更内容を公開します。 
5. 目的のコンテンツに移動します。
   • ウェブサイトページ：HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［ウェブサイトページ］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［ウェブサイトページ］に直接移動します。
   • ランディングページ：HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［ランディングページ］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［ランディングページ］に直接移動します。
   • ブログ：HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［ブログ］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞ ［ブログ］に直接移動します。
6. カスタムモジュールを使用しているコンテンツの名前をクリックします。 
7. コンテンツエディターで、カスタムモジュールをクリックします。 
8. サイドバーエディターで、［フォントフィールド］ドロップダウンメニューをクリックして、Googleフォントを選択します。 

カスタムフォントの使用

標準的なウェブフォントやGoogle Fontsのようなフォントライブラリーを使用する代わりに、フォントファイルをアップロードし、それをテーマで使用したりスタイルシートで参照したりできます。 

テーマでカスタムフォントを使用する

テーマエディターでカスタムフォントをアップロードし、そのフォントをページや投稿で使用します。フォントファイルはTTF、OTF、WOFFファイル形式に対応しています。

ページ用または投稿用のカスタムフォントをアップロードする

カスタムフォントをアップロードすると、ページ、投稿、ナレッジベース記事で使用できるようになります。

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［ウェブサイトページ］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［ウェブサイトページ］に直接移動します。
   • ランディングページ：HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［ランディングページ］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［ランディングページ］に直接移動します。
   • ブログ：HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［ブログ］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞ ［ブログ］に直接移動します。
2. コンテンツの名前をクリックします。 
3. コンテンツエディターで、［編集］メニューをクリックし、［テーマ：［テーマの名前］］を選択します。
4. 左側のサイドバーメニューで、任意のフォント ドロップダウン メニュー をクリックし、［ブランドフォントを管理］を選択します。
5. フォントを追加または編集するには、 こちらのナレッジベース記事の手順に従って ください。

ナレッジベース記事のカスタムフォントをアップロードする

カスタムフォントをアップロードすると、ページ、投稿、ナレッジベース記事で使用できるようになります。

1. HubSpotアカウントで、［その他］をクリックし、［サービス］＞［ナレッジベース］に移動します。アカウントに［その他］が表示されない場合は、［サービス］＞ ［ナレッジベース］に直接移動します。
2. 右上の［テンプレートをカスタマイズ］をクリックします。
3. 左のサイドバーで［デザイン］タブをクリックします。
4. 左のサイドバーで、［フォントスタイル］をクリックします。
5. 任意のフォントドロップダウンメニュー をクリックし、[ブランドフォントを管理]を選択します。
6. フォントを追加または編集するには、 こちらのナレッジベース記事の手順に従って ください。

カスタムフォントを編集する

テーマエディターでカスタムフォントをアップロードしたら、 追加のフォントをアップロードしたり、追加のフォントスタイルを使用して既存のフォントをカスタマイズしたり、フォントを削除したりできます。

スタイルシートでカスタムフォントを使用する

標準的なウェブフォントやGoogle Fontsのようなフォントライブラリーを使用する代わりに、ファイルツールでフォントファイルをホスティングし、スタイルシートでそれらを参照することができます。 

注：カスタムフォントは、デザインマネージャーにアクセスできるアカウントでのみ利用可能で、CSSを使ってカスタムフォントを適用する必要があります。カスタムフォントを追加しても、そのフォントはコンテンツエディターのスタイル設定ドロップダウンメニューに追加されません。

コンテンツでフォントを使用するには、フォントのファイルをファイルツールにアップロードします。フォントが確実にすべてのブラウザーで読み込まれるように、少なくとも .woff、 .ttf、 および.eot バージョンをアップロードすることをお勧めします。Font Squirrelのコンバーターツールの［Expert］モードを使用して、追加のファイル形式を生成できます。

1. HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［ファイル］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［ファイル］に直接移動します。
2. [ファイルをアップロード]をクリックします。
3. コンピューターのハードドライブ上で、フォントファイルを選択し、［開く］をクリックします。
4. アップロードされたフォントファイルの名前をクリックします。
5. 右側のパネルで［URLをコピー］をクリックし、ファイルがホスティングされているURLをコピーします。ファイル形式ごとにフォントのURLが必要になります。

スタイルシートでのカスタムフォントの使用

カスタムフォントをファイルツールに追加すると、スタイルシートでそのフォントを参照できます。フォントスタイル（イタリック、太字など）ごとに、個別の@font-faceルールが必要になります。HubSpotでのスタイルシートの使い方について詳細をご確認ください。 

1. HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［デザインマネージャー］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［デザインマネージャー］に直接移動します。
2. ファインダーで、コンテンツに使用されているスタイルシートを開きます。
3. フォントスタイルごとに次の操作を行います。 
   • スタイルシートの先頭に、次のコードを貼り付けます。 

@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 Nameをフォントの名前に置き換えます。
  • 「your_font_file.xxx?」を、ファイルツールからのURLに置き換えます。ファイル形式ごとにこれを繰り返します。

4. font-familyプロパティーでCSSルールを作成し、カスタムフォントを適用します。 
5. 右上の［更新］または［公開］をクリックして、変更内容を公開します。 

ドラッグ&ドロップEメールエディターでEメールのカスタムフォントを使用する

カスタムEメールフォントは、Apple Mailでサポートされており、Samsung Mailでも部分的にサポートされています。カスタムフォントは、Gmail、Outlook、およびほとんどのモバイル ウェブ クライアントではサポートされていません。読み手に対して一貫したエクスペリエンスを保証するには、Eメールでデフォルトのウェブフォントを使用することをお勧めします。

ただし、ドラッグ&ドロップEメールエディターでEメールにカスタムフォントを追加したい場合は、カスタムフォントをブランドキットにアップロードして予備フォントを設定した後で追加できます。 

1. ブランドブランドキットにカスタムフォントを追加し、カスタムフォントに最も近いフォールバックフォントを選択します。フォールバックフォントに関する問題を回避するには、次のようにします。  
   • カスタムフォントとの高さと太さが類似した予備フォントを使用します。
   • さまざまなEメールクライアントでマーケティングEメールをプレビュー して、どのフォントが使用されるかを確認します。
   • 重要な全ての要素がフォールバックフォントで想定通りに表示されるようにします。
2. HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞［Eメール］に移動します。アカウントに［その他］が表示されない場合は、［マーケティング］＞［Eメール］に直接移動します。
3. マーケティングEメールの名前をクリックするか、[Eメールを作成 ]をクリックして 新しいEメールを作成します。
4. カスタムフォントを使用して、段落や見出しなどのテキストタイプのスタイルを設定するには、次の手順に従います。
   • Eメールエディターで、左側のサイドバーにある テンプレートデザインアイコンをクリックします。
   • を設定するには、[テキストスタイル]セクションでドロップダウンメニューをクリックし、[カスタムフォント ]セクションでフォントを選択します。

5. リッチ テキスト モジュールでカスタムフォントを使用するには: 
   • Eメールエディターで、リッチ テキスト モジュール内のテキストを強調表示します。
   • リッチ テキスト エディターでフォントのドロップダウンメニューをクリックし、[カスタムフォント]にマウスポインターを置いて、カスタムフォントの上に太さを選択します。

6. Eメールのコンテンツを作成してから、 複数のクライアントでEメールをプレビューします。
7. 最終決定してEメールを送信します。

カスタムコードEメールテンプレートでのカスタムフォントの使用

カスタムフォントはApple Mailでサポートされており、Samsung Mailでも部分的にサポートされています。カスタムフォントは、Gmail、Outlook、およびほとんどのモバイル ウェブ クライアントではサポートされていません。読み手に対して一貫したエクスペリエンスを保証するには、Eメールでデフォルトのウェブフォントを使用することをお勧めします。

ただし、カスタムコードEメールテンプレートにカスタムフォントを追加したい場合は、 カスタムフォントをファイルツールに追加した後で追加できます。

1. HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［デザインマネージャー］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［デザインマネージャー］に直接移動します。
2. ファインダーで、カスタムコードEメールテンプレート の名前 をクリックします。
3. フォントスタイルごとに次の操作を行います。
   • テンプレートの<head>セクションに、このコードを<style>....</style>タグの間に、以下のコードを貼り付けてください： 

@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');}

1. • Your Font Nameをフォントの名前に置き換えます。
   • 「your_font_file.xxx?」を、ファイルツールからのURLに置き換えます。ファイル形式ごとにこれを繰り返します。 

4. Eメール本文のコードに、 インラインスタイルでカスタムフォントを追加します。 
5. 右上の［更新］または［公開］をクリックして、変更内容を公開します。 

CTAでのカスタムフォントの使用

テーマにカスタムフォントを追加すると、そのフォントをCTAで使用できるようになります。

1. HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞ ［CTA］の順に進みます。アカウントに［その他］が表示されない場合は、［マーケティング］＞［CTA］に直接移動します。
2. 左上のドロップダウンメニューをクリックし、［CTA］を選択します。
3. CTAにマウスポインターを合わせ、［アクション］>［編集］をクリックします。 
4. CTAエディターの左パネルで、［デザイン］タブをクリックします。 
5. ［スタイル］セクションをクリックして展開します。
6. ［基本フォント］ドロップダウンメニューをクリックして、使用するカスタムフォントを選択します。 
7. CTAの作成に戻ります。 

CTAでのカスタムフォントの使用（旧）

CTAと同様に、 カスタム フォント ファイルをアップロードした後、旧CTAでそれを使用します。

1. HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞ ［CTA］の順に進みます。アカウントに［その他］が表示されない場合は、［マーケティング］＞［CTA］に直接移動します。
2. CTAにマウスポインターを合わせ、［アクション］>［編集］をクリックします。 
3. 右側のパネルで［詳細オプション］をクリックします。 
4. テキストボックスに次のコードを貼り付けます。
   
   font-family: 'Your Font Name';
5. 「Your Font Name」をフォントの名前に置き換えます。
6. 右下の［次へ］をクリックします。次に［保存］をクリックします。

フォームでカスタムフォントを使用する

「ブランド設定」のカスタムフォントやブランドフォントは、フォームエディタでは直接利用できません。フォントピッカーには、デフォルトのフォントとGoogle Fontsのみが表示されます。

フォームにカスタムフォントやブランドフォントを適用するには、まずそのフォントを、フォームが埋め込まれているページまたはブログ記事のレベルで読み込む必要があります：

• テーマテンプレート：フォームが表示されるページまたはブログのテーマ設定で、カスタムフォントを追加してください。テーマでのカスタムフォントの使用について、の詳細をご覧ください。
• スタイルシート：フォームが表示されるページやブログに適用されるスタイルシート内で、カスタムフォントを参照してください。スタイルシートでのカスタムフォントの使用について、の詳細をご覧ください。

カスタムモジュールでのカスタムフォントの使用

カスタムフォントをファイルツールに追加したら、カスタムブログまたはページモジュールでそのフォントを使用します。カスタムコードEメールテンプレートにカスタムフォントを追加する方法をご覧ください。 

1. HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［デザインマネージャー］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［デザインマネージャー］に直接移動します。
2. ファインダーで、カスタムモジュール の名前 をクリックします。
3. モジュールエディターの[module.css ]セクションで、次のコードを貼り付けます。

@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');}

5. • Your Font Nameをフォントの名前に置き換えます。
   • 「your_font_file.xxx?」を、ファイルツールからのURLに置き換えます。ファイル形式ごとにこれを繰り返します。
6. font-familyプロパティーでCSSルールを作成し、カスタムフォントを適用します。 
7. 右上の［変更を公開］をクリックして、変更内容を公開します。