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

HubSpotでのフォントの使用

更新日時 2026年5月18日

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

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  
デフォルトのフォント
Arial メリウェザー*
Courier New Tahoma
Georgia Times New Roman
Helvetica Trebuchet MS
ラト* Verdana
*ドラッグ&ドロップEメールエディターではウェブフォントとしてのみ使用可能。

 

ウェブフォントの使用

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

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

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

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

[Google Fonts] ページに、Google フォントを埋め込むための [Web] タブが表示されます。CSSクラスの埋め込みコードと[コードをコピー]ボタンの周囲にボックスが配置されます。

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

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

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

カスタムコード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］の順に進みます。
  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アカウントで、［コンテンツ］＞［ファイル］に移動します。HubSpotの無料ツールをご使用の場合は、［マーケティング］＞［Eメール］に移動します。右上で［Eメールツール］をクリックし、［ファイル］を選択します。
  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メールで デフォルトのウェブフォントを使用することをお勧めします 。ただし、カスタムコード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］の順に進みます。
  2. 左上のドロップダウンメニューをクリックし、［CTA］を選択します。
  3. CTAにマウスポインターを合わせ、［アクション］>［編集］をクリックします。 
  4. CTAエディターの左パネルで、［デザイン］タブをクリックします。 
  5. ［スタイル］セクションをクリックして展開します。
  6. ［基本フォント］ドロップダウンメニューをクリックして、使用するカスタムフォントを選択します。 
  7. CTAの作成に戻ります。 

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

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

  1. HubSpotアカウントにて、［マーケティング］＞［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がご提供しているヘルプはこちらでご確認ください。
目次 メニュー

関連記事

New to HubSpot? Use these guides to get started.