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

Google フォントを HubSpot ページおよび CTA に追加するにはどうすればよいですか?

更新日時 12月 20, 2018

対象製品

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

Google フォントリンクタグは、[ヘッダー HTML] フィールドを使用して、設定で特定のページまたはすべてのページに適用できます。CSS の編集に慣れている場合は、特定の CSS ファイルの一番上に @import コードを追加することもできます。

最初に、Google から Google フォントスクリプトを取得します

Google フォントのスクリプトをコピーする

  • fonts.google.com に移動して、目的のフォントを見つけます。
  • フォント名の横にあるプラスアイコン + をクリックします。

  • 画面の一番下に表示される [1 Family selected (1 つのファミリーが選択されました)] バーをクリックします。
  • そのフォントファミリーの追加のスタイルやウェイトをインポートする場合は、[カスタマイズ] タブを選択してチェックボックスを使用します。

  • [@import] タブを選択して Google によって提供されるスクリプトをコピーします (例: @import url(http://fonts.googleapis.com/css?family=Open+Sans);)。

このコードをコピーしたら、HubSpot に戻って Google フォントを適用できます。

Google フォントを HubSpot ページに追加する

  • 以下の例に示すように、Google フォントを目的の CSS セレクターに適用します。 

ユーザー追加画像

Google フォントを CTA に追加する

  • [Specify in CSS (CSS で指定)] コードを Google Fonts からコピーします。

  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [CTA]の順に進みます。
  • このフォントで更新する CTA の上にカーソルを置き、[アクション] > [編集] の順にクリックします。 
  • [詳細オプション] をクリックして、その他のオプションを展開します。
  • [Specify in CSS (CSS で指定)] コードを Google Fonts から [カスタム CSS] セクションに追加します。この CSS を入力すると、直ちに Google フォントが CTA に適用されます。 

  • 右下の [次へ] をクリックして CTA の詳細を最終確認し、[保存] をクリックします。