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;
}
フォントが変更されました!