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

HubSpotでのフォントの使用

更新日時 2024年 2月 28日

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

すべての製品とプラン

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

カスタムフォントの使用

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

テーマでカスタムフォントを使用箇所

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

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

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

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

カスタムフォントをテーマに追加する

  • フォントスタイル 1ドロップダウンメニューをクリックし、フォントファイルが使用しているスタイルを選択します。同じフォントファイルを複数のスタイルに設定することができます。
  • フォントスタイルを追加するには、+ 別のフォントスタイルを追加をクリックし、フォントスタイルを追加します。アップロードされたフォントファイルには、少なくとも1つの関連付けが必要です。 
  • 該当するフォントスタイルをすべて追加したら、完了をクリックします。

カスタムフォントの編集

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

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

    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
    • ブログ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ブログ]の順に進みます。
  • コンテンツの上にカーソルを重ねて[編集]をクリックします。 
  • コンテンツエディターで、「編集」メニューをクリックし、「テーマ:[テーマの名前]」を選択する。
  • 左のサイドバーメニューで、Fontsセクションをクリックして展開します。
  • フォントドロップダウンメニューをクリックし、カスタムフォントの管理を選択する。
  • ー新規フォントをー追加するにはーするにはー ダイアログボックスのーでーでーでーでーでー新規フォントをー追加するにはーするにはー ダイアログボックスでーでー 「ー新規フォントをー追加するーー 
  • フォントを編集するには
    • ダイアログボックスで、フォントの横にあるアクションドロップダウンメニューをクリックし、メニューを編集 を選択します。
    • フォントの名前を変更するには、フォント名の横の編集をクリックし、新しいフォント名を入力します。 
    • フォントスタイルを追加するには、別のフォントスタイルを追加をクリックし、フォントスタイルドロップダウンメニューをクリックし、スタイルを選択します。アップロードをクリックし、フォントファイルをアップロードします。 
    • フォントスタイルを削除するにはdeletededel delete icon next to the font style. You cannot delete a font style if there are no other font styles listed. 
    • [保存]をクリックします。 
  • フォントを削除するには、ダイアログボックスのアクションドロップダウンメニューをクリックし、削除を選択します。 

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


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

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

標準の Web フ ォ ン ト を使 う か、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メールではデフォルトのWebフォントを使用することをお勧めします。ただし、カスタムコード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がご提供しているヘルプはこちらでご確認ください。