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

HubSpotでのフォントの使用

更新日時 2024年 10月 16日

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

すべての製品とプラン

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

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

カスタムフォント

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

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

既定のフォントの使用

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

  • コンテンツを開きます。

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

    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • ジョージア

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • Monaco*

    • Symbol*

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

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

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

ウェブフォントの使用

Starterテンプレートとテーマ、ナレッジベース記事、カスタムモジュールを使用するページでは、コンテンツエディターでデフォルトでウェブフォントを使用できます。

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

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

また、Google Fonts、フォントのインポートコードをコピーしてコンテンツのスタイルシートに貼り付け、CSSでフォントを適用するといったサードパーティーのサービスを利用することもできる：

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

copy-google-font

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

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

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

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

Googleフォントは、Apple MailといくつかのEメールクライアントでサポートされていますが、幅広いサポートは限られており、ほとんどの一般的なEメールクライアントは既定のウェブフォントしかサポートしていません。クラシックEメールエディターで使用されるデフォルトフォントを選択することについて、さらに詳しくご覧ください。 
 
カスタムコード化されたEメールテンプレートは、以下のアカウントでのみ利用可能です。Marketing Hub ProfessionalまたはEnterprise配信登録をご利用のアカウントでのみ使用可能です。 
 
カスタムコードEメールテンプレートにGoogle Fontを追加するには： 
  • Google Fontsからフォントの@importコードをコピーします。
  • HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  • ファインダーで、カスタムコードEメールテンプレートを開きます。
  • テンプレートの<head>セクションで、<style>....</style>タグの間に@importコードを貼り付けます。 
  • Eメール本文のコードに、インラインスタイルでカスタムフォントを追加します。 
  • 右上の［変更を公開］をクリックして、変更内容を公開します。 

CTAにGoogle Fontを使う（旧）

  • 当該フォントのCSSルールを設定するGoogleのコードをコピーします。
  • HubSpotアカウントにて、［マーケティング］＞［CTA］の順に進みます。
  • CTAにマウスポインターを合わせ、［アクション］>［編集］をクリックします。 
  • 右側のパネルで［詳細オプション］をクリックします。 
  • テキストボックスに、当該フォントのCSSルールを設定するGoogleのコードを貼り付けます。 
  • 右下の［次へ］をクリックします。次に、［保存］をクリックします。

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

  • HubSpotアカウントにて、［マーケティング］＞［フォーム］の順に進みます。
  • フォーム名にマウスポインターを合わせ、「アクション」>「フォームの編集」または「新規フォームの作成」をクリックします。
  • フォームエディターで［スタイルとプレビュー］タブをクリックします。 
  • 左のサイドバーメニューで［セクションをスタイル設定］をクリックします。
  • ［テキスト］セクションで、［フォントファミリー］ドロップダウンメニューをクリックし、Googleフォントを選択します。 
  • 右上の［更新］または［公開］をクリックして、変更を適用します。 

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

注： Google Fontsは、Eメールテンプレートで使用されるカスタムモジュールではご利用いただけません。


  • HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。

click-add-field

  • 右上の［変更を公開］をクリックして、変更内容を公開します。 

  • コンテンツを開きます。

    • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
    • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
    • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
  • カスタムモジュールを使用しているコンテンツの名前をクリックします。 
  • コンテンツエディターで、カスタムモジュールをクリックします。 
  • サイドバーエディターで、［フォントフィールド］ドロップダウンメニューをクリックして、Googleフォントを選択します。 

カスタムフォントの使用

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

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

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

カスタムフォントのアップロード

  • コンテンツを開きます。

    • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
    • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
    • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
  • コンテンツの名前をクリックします。 
  • コンテンツエディターで、［編集］メニューをクリックし、［テーマ：［テーマの名前］］を選択します。
  • 左サイドバーのメニューで、フォントのドロップダウンメニューをクリックし、［カスタムフォントをアップロード］を選択します。 
  • 右側のパネルで、［フォント名］フィールドにフォントのラベルを入力します。 
  • ［フォントファイルを選択］をクリックし、1つ以上のフォントファイルを選択し、［次へ］をクリックします。 

add-a-custom-font-to-theme

  • ［フォントのスタイル1］ドロップダウンメニューをクリックし、フォントファイルが使用しているスタイルを選択します。スタイルごとに個別のフォントファイルを使用する必要があります。 
  • フォントスタイルを追加するには、［+ 別のフォントスタイルを追加］をクリックし、フォントスタイルを追加します。アップロードされたそれぞれのフォントファイルに対して、関連付けられたスタイルが少なくとも1つ必要です。 
  • 該当するフォントスタイルを全て追加したら、［完了］をクリックします。

カスタムフォントの編集

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

  • コンテンツを開きます。

    • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
    • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
    • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
  • コンテンツの名前をクリックします。 
  • コンテンツエディターで、［編集］メニューをクリックし、［テーマ：［テーマの名前］］を選択します。
  • 左のサイドバーメニューで、［フォント］セクションをクリックして展開します。
  • フォントドロップダウンメニューをクリックし、［カスタムフォントを管理］を選択します。
  • 新しいフォントを追加するには、ダイアログボックスで［カスタムフォントを追加］をクリックします。 
  • フォントを編集するには、次の手順に従います。
    • ダイアログボックスで、フォントの横にある［アクション］ドロップダウンメニューをクリックし、［編集］を選択します。
    • フォントの名前を変更するには、フォント名の横にある［編集］をクリックし、新しいフォント名を入力します。 
    • フォントスタイルを追加するには、［別のフォントスタイルを追加］をクリックし、［フォントのスタイル］ドロップダウンメニューをクリックし、スタイルを選択します。［アップロード］をクリックし、フォントファイルをアップロードします。 
    • フォントスタイルを削除するには、フォントスタイルの横にあるdeletededel 削除アイコンをクリックします。他に表示されているフォントスタイルがない場合は、フォントスタイルを削除できません。 
    • ［保存］をクリックします。 
  • フォントを削除するには、ダイアログボックスの［アクション］ドロップダウンメニューをクリックし、［削除］を選択します。 

注：フォントを削除すると、全てのドロップダウンメニューからそのフォントが削除されますが、フォントファイルはファイルツールで削除されるまで残ります。 


  • フォントの編集が終了したら、［完了］をクリックします。

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

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

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

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

  • HubSpotアカウントにて、［ライブラリー］＞［ファイル］の順に進みます。
  • ［ファイルをアップロード］をクリックします。 
  • コンピューターのハードドライブ上で、フォントファイルを選択し、［開く］をクリックします。 
  • アップロードされたフォントファイルの名前をクリックします。 
  • 右側のパネルで［URLをコピー］をクリックし、ファイルがホスティングされているURLをコピーします。ファイル形式ごとにフォントのURLが必要になります。 

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

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

  • HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  • ファインダーで、コンテンツに使用されているスタイルシートを開きます。
  • フォントスタイルごとに次の操作を行います。 
    • スタイルシートの先頭に、次のコードを貼り付けます。 
@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に置き換えます。ファイル形式ごとにこれを繰り返します。 
  • ［font-family］プロパティーでCSSルールを作成し、カスタムフォントを適用します。 
  • 右上の［更新］または［公開］をクリックして、変更内容を公開します。 

sample-custom-font-in-stylesheet

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

カスタムフォントは、ほとんどの一般的なEメールクライアントではサポートされていません。読み手に対して一貫したエクスペリエンスを保証するには、Eメールで既定のウェブフォントを使用することをお勧めします。ただし、カスタムコードEメールテンプレートにカスタムフォントを追加したい場合は、カスタムフォントをファイルツールに追加した後で追加できます。

  • HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  • ファインダーで、カスタムコードEメールテンプレートを開きます。
  • フォントスタイルごとに次の操作を行います。
    • テンプレートの<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に置き換えます。ファイル形式ごとにこれを繰り返します。 
  • Eメール本文のコードに、インラインスタイルでカスタムフォントを追加します。 
  • 右上の［更新］または［公開］をクリックして、変更内容を公開します。 

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

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

  • HubSpotアカウントにて、［マーケティング］＞［CTA］の順に進みます。
  • 左上のドロップダウンメニューをクリックし、［CTA］を選択します。
  • CTAにマウスポインターを合わせ、［アクション］>［編集］をクリックします。 
  • CTAエディターの左パネルで、［デザイン］タブをクリックします。 
  • ［スタイル］セクションをクリックして展開します。
  • ［基本フォント］ドロップダウンメニューをクリックして、使用するカスタムフォントを選択します。 
  • CTAの作成に戻ります。 

 

CTAでカスタムフォントを使用する（旧）

CTAと同様に、カスタム フォーム ファイルをアップロードすると、それを旧CTAで使用できるようになります。

  • HubSpotアカウントにて、［マーケティング］＞［CTA］の順に進みます。
  • CTAにマウスポインターを合わせ、［アクション］>［編集］をクリックします。 
  • 右側のパネルで［詳細オプション］をクリックします。 
  • テキストボックスに次のコードを貼り付けます。 

font-family: 'Your Font Name';

  • Your Font Nameをフォントの名前に置き換えます。 
  • 右下の［次へ］をクリックします。次に、［保存］をクリックします。 

set-custom-font-for-cta

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

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

  • HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
  • ファインダーで、カスタムモジュールを開きます。
  • 「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に置き換えます。ファイル形式ごとにこれを繰り返します。
  • ［font-family］プロパティーでCSSルールを作成し、カスタムフォントを適用します。 
  • 右上の［変更を公開］をクリックして、変更内容を公開します。

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

関連記事

New to HubSpot? Use these guides to get started.