COS-General

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

更新日時 November 28, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise

GoogleフォントリンクタグをヘッダーHTMLに追加するか、@importコードをCSSファイルの先頭に追加できます。この作業を行う前に、GoogleからGoogleフォントスクリプトを入手する必要があります。ここでは、@importの方法を説明します。

Googleフォントのスクリプトを入手する

www.google.com/fontsに移動して、目的のフォントを見つけます。フォントの右側にある青い[Add to Collection(コレクションに追加)]ボタンをクリックします。

コレクションは画面の下部に表示されます。フォントを取得したら、画面右下にある[Use(使用)]ボタンを選択します。

[Use(使用)]をクリックしたら、[Step 3(ステップ3)]までスクロールして[@import(@import)]タブに移動し、Googleが提供するスクリプト(@import url(http://fonts.googleapis.com/css?family=Open+Sans);
など)をコピーします。

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

HubSpot COSランディングページにGoogleフォントを適用する

ページに適用されているスタイルシートを見つけます。スタイルシートは、[Content(コンテンツ)] > [Design Manager(デザインマネージャー)]にあります。

@importコードをCSSファイルの最初の行に貼り付けます。フォントを読み込むには最初の行に貼り付ける必要があります。

また、スクリプトから必ずhttp:を削除してください。このようにすると、HubSpotランディングページをプレビューしながらフォントを読み込むことができます。スクリプトを貼り付けたら、[Save Changes(変更を保存)]をクリックします。

GoogleフォントをCSSファイルに挿入したので、そのfont-familyをコード全体でCSSプロパティとして呼び出すことができます。つまり、以下の説明に従って、カスタムCSSスタイルシート内の目的のCSSセレクタでGoogleフォントを適用します。Googleフォントを使用するには、CSSセレクタ内で必ずfont-familyを設定してください。

ユーザー追加画像

関連記事: