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

WordPressでAdobe Fontを使用する方法
本記事はテーマ:LightningでAdobe Fontを使用する方法を記載しています。
Step1.使いたいAdobe Fontを選ぶ
Adobe Fontsにアクセスし、フォントを選ぶ。今回は例としてマメロンを選びます。
1-1

1-2

1-3

1-4

1-5

Step2.WordPressに読み込む設定を行う
2-1
Lightning子テーマのheader.phpを編集する。
<head>と</head>タグの間にコピーしたコードを貼り付ける。

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

今回は<h2>タグを変更するので以下のようにCSSを記載
h2 {
font-family: "mamelon", sans-serif;
font-weight: 300;
}

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