WordPressでAdobe Fontsを使う方法 (Swell実例付き)
Contents
Adobe Fontsとは
Adobe Fontsは、Adobe（アドビ）社が提供しているフォントサービスで、30,000以上の種類のフォントがあります。フォントはウェブサイトのイメージを大きく変える要素のひとつですので、お気に入りのフォントを見つければ、きっと素敵なウェブサイトになるでしょう。
「Adobe Fontsって、Adobe Creative Cloudを契約しないといけないんでしょ？」と思っている人もいますが、実は1,000以上のフォントは無料で使えます。
とはいえ、Adobe Creative Cloudを契約すれば30,000以上の種類のフォントが利用できますし、周りとの差別化がしやすいので、おすすめです。
WordPressでAdobe Fontsを使う方法
WordPressでAdobe Fontsを使う方法を、4ステップに分けて説明していきます。
❶ Adobe FontsでWebプロジェクトの作成
お気に入りのフォントが見つかったら、Adobe FontsのWebプロジェクトに追加します。
※Adobe Creative Cloudを契約していない場合、無料で使えないフォントだと「Webプロジェクトに追加」メニューが表示されません。
以下の画面が表示されるので、コードをコピーします。
❷ WordPressでAdobe Fontsを読み込み
先ほどコピーしたコードを、Wordpressの<head>タグ内に貼り付けます。方法はWordpressテーマによって異なります。私の好きなWordPressテーマ「SWELL」
の場合は以下のように行います。
WordPress管理画面 > 外観 > カスタマイズ でカスタマイズ画面を開きます。
[高度な設定]メニューの中の[headタグ終了直前に出力するコード]に、先ほどコピーしたコードを貼り付けます。
❸ Adobe FontsからCSSを取得
続いて、Adobe FontsからCSSをコピーするために、Webプロジェクトを開きます。
この開き方がわかりにくいのですが、Adobe Fontsの画面右上にある[フォントを管理]を押すと、以下の画面のように[Webプロジェクト]メニューが表示されますので、これをクリックします。
[プロジェクトを編集]を押すと以下の画面になるので、使いたいフォントのCSSをコピーします。[CSSをコピー]が見つからない場合、ブラウザの横幅が短くて、表示できていない可能性がありますので、横幅を延ばしてください。
❹ WordPressでCSSの適用
WordPress管理画面 > 外観 > カスタマイズ でカスタマイズ画面を開きます。
以下の画像のように[追加CSS]メニューの中にCSSが書ける欄がありますので、ここに先ほどコピーしたCSSを貼り付けます。
ただ貼り付けるだけではだめで、CSSセレクタを書いてあげる必要があります。たとえば、bodyタグ内全体に適用するには、以下のように記載します。これで完了です。
body {
font-family: klee-one, sans-serif;
font-weight: 400;
font-style: normal;
}
CSSセレクタについて詳しく知りたい場合、以下のサイトがわかりやすく解説しているのでおすすめです。
(参考) WordPressでGoogle Fontsを使う方法
Adobe Fontsと並んで有名なフォントサービスがGoogle Fontsです。
WordPressでGoogle Fontsを使うのは簡単で、多くのプラグインがあります。個人的には、「Fonts Plugin」が使いやすかったです。
最後までご覧いただきありがとうございました。
少しでも参考になりましたら嬉しいです。
