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

HubSpotでのフォントの使用

更新日時 2025年6月16日

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

HubSpotのコンテンツで使用できるフォントは、コンテンツのタイプとフォントのタイプによって異なります。一部の既定のフォントは全てのコンテンツエディターで使用できますが、ウェブフォント（Googleフォントなど）とカスタムフォントについては以下に概要を示す追加の制限があります。 

コンテンツタイプ フォントタイプ  
  既定のフォント ウェブフォント

カスタムフォント

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

注：全てのアカウントで全てのコンテンツタイプが利用できるわけではありません。お持ちのHubSpotアカウントのサブスクリプションで利用できるコンテンツタイプは、製品およびサービスのカタログで確認できます。 

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

既定のフォントは、あらゆる種類のコンテンツで使用可能で、ほとんどのプラットフォームとデバイスで読み込めるように設計されています。 

  1. コンテンツを開きます。

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

    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • Georgia

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • Monaco*

    • Symbol*

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*ドラッグ＆ドロップEメールエディターでは使用不可。 

**ドラッグ＆ドロップEメールエディターではウェブフォントとしてのみ使用可能。

ウェブフォントの使用

コンテンツエディターでは既定でウェブフォントを使用できます。

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

注：リッチ テキスト エディターのフォント ドロップダウン メニューで、ウェブフォントを選択できない場合があります。 

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

  1. fonts.google.comに移動します。
  2. 検索バーにフォント名を入力します。 
  3. フォント名をクリックして、インポート可能なスタイルのリストを表示します。
  4. インポートする各スタイルの横にある［+ Select this style（+ このスタイルを選択）］をクリックします。
  5. 右側のパネルの［Use on the web（ウェブで使用）］セクションで、［@import］を選択します。 
  6. フォントのコードをコピーします。 
    • ［Use on the web（ウェブで使用）］セクションで、<style>タグを除いた@importコードをコピーします。
    • ［CSS rules to specify families（ファミリーを指定するCSSルール）］フィールドに、CSSルールを設定するためのコードをコピーします。 

copy-google-font

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

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

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

カスタムコード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. Eメール本文のコードに、インラインスタイルでカスタムフォントを追加します。 
  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. 右側のインスペクターで、［フィールド］セクションの［フィールドの追加］ドロップダウンをクリックし、［フォント］を選択します。詳しくは、フォントフィールドの取り扱いをご覧ください。

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

sample-custom-font-in-stylesheet

カスタムコード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. 右下の［次へ］をクリックします。次に、［保存］をクリックします。

set-custom-font-for-cta

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

カスタムフォントをファイルツールに追加すると、カスタムブログやページモジュールでそのフォントを使用できます。カスタムコード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');}
  1. Your Font Nameをフォントの名前に置き換えます。
  2. 「your_font_file.xxx?」を、ファイルツールからのURLに置き換えます。ファイル形式ごとにこれを繰り返します。
  3. font-familyプロパティーでCSSルールを作成し、カスタムフォントを適用します。 
  4. 右上の［変更を公開］をクリックして、変更内容を公開します。

custom-module-custom-font
この記事はお役に立ちましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。
目次 メニュー

関連記事

New to HubSpot? Use these guides to get started.