WordPressサイトでAdobe Fontを使用したい

Adobe Fontは魅力的なフォントが沢山!

本記事では、お客様のサイトをLightningでコーディングする際に、Adobe Fontの指定があったため、使い方を調べた時のことをメモとして残します。
Adobe Fontを使用することはできたのですが、ページの描画とAdobe Fontの適用に若干のタイムラグが発生し画面がちらつくので、そのあたりが気になる方にはお勧めしません。

Lightningのデフォルトのh2フォント

デフォルトのh2のフォント

WordPressでAdobe Fontを使用する方法

本記事はテーマ:LightningでAdobe Fontを使用する方法を記載しています。

Step1.使いたいAdobe Fontを選ぶ

Adobe Fontsにアクセスし、フォントを選ぶ。今回は例としてマメロンを選びます。

1-1

Adobe Fontsサイト

1-2

Adobe Fontsサイトのフォントを検索する画面

1-3

Adobe Fontsサイトの使用フォント選ぶ画面

1-4

Adobe Fontsサイトの「Webプロジェクトにフォントを追加」画面

1-5

Adobe Fontsサイトのプロジェクトにフォントが追加された画面

Step2.WordPressに読み込む設定を行う

2-1

Lightning子テーマのheader.phpを編集する。

<head>と</head>タグの間にコピーしたコードを貼り付ける。

header.phpの編集画面

Step3.CSSでfont-familyを指定する

3-1

Adobe Fontsサイトのプロジェクトにフォントが追加された画面

今回は<h2>タグを変更するので以下のようにCSSを記載

h2 {
font-family: "mamelon", sans-serif;
font-weight: 300;
}

Adobe Fontに変更後のh2のフォント

フォントが変更されました!