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

HubSpotでのフォントの使用

更新日時 2026年7月1日

以下の 製品でご利用いただけます（別途記載されている場合を除きます）。

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

始める前に

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

アクセス権限が必要 フォントが使用されている場所によっては、ユーザーに追加の権限が必要な場合があります。

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

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

カスタムフォント

  
ページ - テーマテンプレート ✓ テーマ設定 とスタイルシートで使用可能 ✓  
ページ - コードテンプレート ✓ スタイルシートまたはカスタムモジュールで使用可能 スタイルシートで使用可能  
ブログ ✓ スタイルシートまたはカスタムモジュールで使用可能 ✓  
Eメール ドラッグ＆ドロップEメールエディターで使用できない既定のフォントがある カスタムコードEメールテンプレートでのみ使用可能で、ほとんどのEメールクライアントではサポートされていない カスタムコードEメールテンプレートでのみ使用可能で、ほとんどのEメールクライアントではサポートされていない  
ナレッジベース 記事エディターではフォントをカスタマイズできません テーマ設定で使用可能  テーマ設定で使用可能  
カスタムモジュール ✓ Eメールで使用しないカスタムモジュールで使用可能 Eメールで使用しないカスタムモジュールで使用可能  
CTA（旧） ✓ ✓ ✓  
CTA ✓ ✓ ✓  

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

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

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

  2. コンテンツの名前をクリックします。
  3. コンテンツエディターで、リッチ テキスト モジュールをクリックし、編集したいテキストをハイライトします。 
  4. リッチ テキスト ツールバーで、［フォント］ドロップダウンメニューをクリックし、フォントを1つ選択します。リッチ テキスト モジュールで使用できるフォントは以下のとおりです。
既定のフォント
ブランドフォント Merriweather
Andale Mono モナコ
Arial Symbol
Book Antiqua Tahoma
Courier New Terminal
Georgia Times New Roman
Helvetica Trebuchet MS
Impact Verdana
Lato  

ウェブフォントの使用

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

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

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

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

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

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

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

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

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

サブスクリプションが必要 カスタムコードEメールテンプレートを作成するには、 Marketing Hub Professional または Enterprise サブスクリプションが必要です。


カスタムコード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. インスペクターで、[フィールド]セクションの[ フィールドの追加]ドロップダウンメニューをクリックし、[ フォント]を選択します。詳しくは、フォントフィールドの取り扱いをご覧ください。
  1. 右上の［変更を公開］をクリックして、変更内容を公開します。 
  2. 目的のコンテンツに移動します。
  3. カスタムモジュールを使用しているコンテンツの名前をクリックします。 
  4. コンテンツエディターで、カスタムモジュールをクリックします。 
  5. サイドバーエディターで、［フォントフィールド］ドロップダウンメニューをクリックして、Googleフォントを選択します。 

カスタムフォントの使用

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

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

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

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

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

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

  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に置き換えます。ファイル形式ごとにこれを繰り返します。
  1. font-familyプロパティーでCSSルールを作成し、カスタムフォントを適用します。 
  2. 右上の［更新］または［公開］をクリックして、変更内容を公開します。 

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

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

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

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

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

  1. Eメールのコンテンツを作成してから、 複数のクライアントでEメールをプレビューします。
  2. 最終決定して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');}

    • Your Font Nameをフォントの名前に置き換えます。
    • 「your_font_file.xxx?」を、ファイルツールからのURLに置き換えます。ファイル形式ごとにこれを繰り返します。 
  1. Eメール本文のコードに、 インラインスタイルでカスタムフォントを追加します。 
  2. 右上の［更新］または［公開］をクリックして、変更内容を公開します。 

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. 右下の［次へ］をクリックします。次に［保存］をクリックします。

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

カスタムフォントをファイルツールに追加したら、カスタムブログまたはページモジュールでそのフォントを使用します。カスタムコード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');}

    • Your Font Nameをフォントの名前に置き換えます。
    • 「your_font_file.xxx?」を、ファイルツールからのURLに置き換えます。ファイル形式ごとにこれを繰り返します。
  2. font-familyプロパティーでCSSルールを作成し、カスタムフォントを適用します。 
  3. 右上の［変更を公開］をクリックして、変更内容を公開します。 
この記事はお役に立ちましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。

関連記事

目次 /ja/website-and-landing-pages/use-fonts-in-hubspot メニュー

関連記事

New to HubSpot? Use these guides to get started.