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

Google FontsをページとCTAに追加する

更新日時 2021年 10月 15日

対象製品

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Marketing Hub Basic(旧製品)

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

注:テーマを使用してコンテンツを作成している場合は、テーマ設定内で直接任意のGoogleフォントを選択できます。すべてのGoogleフォントは[デザイン]タブのStarterテンプレートでサポートされています。

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

最初にGoogle Fontsからスクリプトをコピーします。

  • fonts.google.comに移動します。
  • 検索バーで、使用したいフォント名を検索します。
  • フォント名をクリックして、インポート可能なスタイルの完全なリストを表示します。
  • このフォントからインポートする各スタイルの横にある[+ Select this style(+ このスタイルを選択)]をクリックします。
  • 右側のパネルで[エンベッド]タブを選択し、[@import]を選択します。
  • Googleが提供する@importスクリプトを、<style>タグなしでコピーします。このスクリプトをHubSpotアカウントのスタイルシートの上部に追加します。
  • 次に、Google Fontsからファミリーを指定するCSSルールを使用して、HubSpotスタイルシートの特定のCSSセレクターにこれらのフォントを適用します。

import-google-fonts-to-stylesheet

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

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

h1 {
font-family:'Comic Neue', cursive;
}

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

アカウント内のカスタムCTAにGoogleフォントを追加することができます。このオプションは画像CTAには選択できません。

  • [Specify in CSS(CSSで指定)]コードをGoogle Fontsからコピーします。
  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [CTA]の順に進みます。
  • 編集するCTAにマウスポインターを合わせて[Actions(アクション)]のドロップダウンメニューをクリックし、[Edit(編集)]を選択します。 
  • 右側のパネル内のCTAエディターの下部にある[Advanced Options(詳細オプション)]をクリックします。
  • カスタムCSSテキストフィールドで、Google Fontsのファミリーを指定するCSSルールのコードを貼り付けます。このCSSを入力すると、直ちにGoogleフォントがCTAに適用されます。 

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