更新日時 2023年 3月 21日
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テンプレートとテーマ、ナレッジベース記事、カスタムモジュールを使用するページでは、コンテンツエディターでデフォルトでウェブフォントを使用できます。開発者は、フォントフィールドを使用してテーマやカスタムモジュールにウェブフォントを追加することもできます。このように使用する場合、ウェブフォントはサードパーティーのサービスから読み込まれるのではなく、HubSpotがページを読み込むドメイン上で直接提供します。
注：リッチ テキスト エディターのフォント ドロップダウン メニューで、ウェブフォントを選択できない場合があります。
また、Googleフォントなどのサードパーティーのサービスを利用する場合は、フォントのインポートコードをコピーしてページのスタイルシートに貼り付け、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ルールを設定するためのコードをコピーします。
Google Fontsからコードを取得したら、HubSpotのコンテンツにフォントを追加できます。
- スタイルシートでのGoogleフォントの使用
- カスタムコードEメールテンプレートでのGoogleフォントの使用
- CTAでのGoogleフォントの使用
- フォームでのGoogleフォントの使用
- カスタムモジュールでのGoogleフォントの使用
スタイルシートでのGoogleフォントの使用
- Google Fontsからフォントの@importコードをコピーします。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- ファインダーで、コンテンツに使用されているスタイルシートを開きます。
- スタイルシートの1行目に@importコードを貼り付けます。
- スタイルシートの適切なセレクターに、CSSルールを設定するコードを追加します。
- 右上の［公開］または［更新］をクリックして、変更内容を公開します。
カスタムコードEメールテンプレートでのGoogleフォントの使用
- Google Fontsからフォントの@importコードをコピーします。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- ファインダーで、カスタムコードEメールテンプレートを開きます。
- テンプレートの
<head>セクションで、<style>....</style>タグの間に@importコードを貼り付けます。 - Eメール本文のコードに、インラインスタイルでカスタムフォントを追加します。
- 右上の［更新］または［公開］をクリックして、変更内容を公開します。
CTAでのGoogleフォントの使用
- 該当フォントのCSSルールを設定するGoogleのコードをコピーします。
- HubSpotアカウントにて、［マーケティング］ > ［リードの獲得］ > ［CTA］の順に進みます。
- CTAにカーソルを置き、［アクション］ドロップダウンメニューをクリックして、［編集］を選択します。
- 右側のパネルで［詳細オプション］をクリックします。
- テキストボックスに、該当フォントのCSSルールを設定するGoogleのコードを貼り付けます。
- 右下の［次へ］をクリックします。続いて［保存］をクリックします。
フォームでのGoogleフォントの使用
- HubSpotアカウントにて、［マーケティング］ > ［リードの獲得］ > ［フォーム］の順に進みます。
- フォーム名の上にカーソルを置き、［アクション］>［フォームを編集］をクリックするか、［新規フォームを作成］をクリックします。
- フォームエディターで［スタイルとプレビュー］タブをクリックします。
- 左にあるサイドバーメニューで［セクションをスタイル設定］をクリックします。
- 「テキスト」セクションで、［フォントファミリー］ドロップダウンメニューをクリックし、Googleフォントを選択します。
- 右上の［更新］または［公開］をクリックして、変更内容を公開します。
カスタムモジュールでのGoogleフォントの使用
注：Eメールテンプレートで使用するカスタムモジュールでは、Googleフォントは使用できません。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- 左側のファインダーで、カスタムモジュールを開きます。詳しくは、カスタムモジュールの作成をご覧ください。
- 右側のインスペクターで、［フィールド］セクションの［フィールドの追加］ドロップダウンをクリックし、［フォント］を選択します。詳しくは、フォントフィールドの取り扱いをご覧ください。
- 右上の［変更を公開］をクリックして、変更内容を公開します。
-
コンテンツを開きます。
- ウェブサイトページ：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ルールを作成し、カスタムフォントを適用します。
- 右上の［更新］または［公開］をクリックして、変更内容を公開します。
カスタムコード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をフォントの名前に置き換えます。
- 右下の［次へ］をクリックします。続いて［保存］をクリックします。
カスタムモジュールでのカスタムフォントの使用
カスタムフォントをファイルツールに追加すると、カスタムブログやページモジュールでそのフォントを使用できます。カスタムコード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ルールを作成し、カスタムフォントを適用します。
- 右上の［変更を公開］をクリックして、変更内容を公開します。
