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

HubSpotでのフォントの使用

更新日時 2021年 10月 15日

対象製品

すべての製品とプラン

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

コンテンツタイプ フォントタイプ  
  既定のフォント Googleフォント

カスタムフォント

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

既定のフォントの使用

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

  • コンテンツに移動します。

    • ウェブサイトページ: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メールエディターではウェブフォントとしてのみ使用可能。

Googleフォントの使用

Starterテンプレートとテーマ、ナレッジベース記事、カスタムモジュールを使用するページでは、コンテンツエディターでGoogleフォントを使用できます。Googleフォントを他のページで使用するには、フォントのインポートコードをコピーしてページのスタイルシートに貼り付け、CSSルールに従ってフォントを適用する必要があります。

開発者がフォントフィールドを使ってテーマとカスタムモジュールにGoogleフォントを追加する方法について詳しくは、HubSpotの開発者ドキュメントをご覧ください。 

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

  • 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メールテンプレートにGoogle Fontを追加するには: 
  • Google Fontsからフォントの@importコードをコピーします
  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • ファインダーで、カスタムコードEメールテンプレートを開きます。
  • テンプレートの<head>セクションで、<style>....</style>タグの間に@importコードを貼り付けます。
  • Eメール本文のコードに、インラインスタイルでカスタムフォントを追加します。 
  • 右上の[更新]または[公開]をクリックして、変更内容を公開します。 

CTAでのGoogleフォントの使用

  • 該当フォントのCSSルールを設定するGoogleのコードをコピーします
  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [CTA]の順に進みます。
  • CTAにカーソルを置き、[アクション]ドロップダウンメニューをクリックして、[編集]を選択します。
  • 右側のパネルで[詳細オプション]をクリックします。
  • テキストボックスに、該当フォントのCSSルールを設定するGoogleのコードを貼り付けます。
  • 右下の[次へ]をクリックします。続いて[保存]をクリックします。

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

注: Eメールテンプレートで使用するカスタムモジュールでは、Googleフォントは使用できません。


  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。

click-add-field

  • 右上の[変更を公開]をクリックして、変更内容を公開します。
  • コンテンツに移動します。

    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
    • ブログ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ブログ]の順に進みます。
  • カスタムモジュールを使用するコンテンツにカーソルを置き、[編集]をクリックします。 
  • コンテンツエディターで、カスタムモジュールをクリックします。 
  • サイドバーエディターで、[フォントフィールド]ドロップダウンメニューをクリックして、Googleフォントを選択します。 

カスタムフォントの使用

標準的なウェブフォントや、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

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

カスタムフォントをファイルツールに追加すると、カスタムモジュールでそのフォントを使用できます。 

  • 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

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