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

HubSpotでのフォントの使用

更新日時 2023年 9月 29日

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

すべての製品とプラン

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

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

カスタムフォント

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

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

既定のフォントの使用

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

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

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

    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • Georgia

    • 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フォントを選択します。 

カスタムフォントの使用

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

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

コンテンツでフォントを使用するには、フォントのファイルをファイルツールにアップロードします。HubSpotでは、フォントが確実に全てのブラウザーで読み込まれるように、最低限.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にカーソルを合わせ、［アクション］>［編集］をクリックします。 
  • 右側のパネルで［詳細オプション］をクリックします。 
  • テキストボックスに次のコードを貼り付けます。 

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.
/ja/website-pages/use-fonts-in-hubspot