【Elementor Tech】Adobe FontsがWordPressで使えない問題。

梅雨のシーズンになりましたね。
雨の音を聞きながら仕事するのは嫌いじゃないですが、振り方がすごいので少し心配になりますね。

これも平日やおでかけがない日なら気にならないのですが、とっても楽しみにしていたおでかけを潰されるとかなり凹みます。

というのも、大阪で”インターペット”という全国からペット用グッズやおやつ、ご飯などを取り扱う会社が集まり、それをいつもよりお安くかえて試供品も山ほどもらえる楽しい楽しいイベントがあったんです…。

今回は犬を連れての参戦予定だったんで、更に残念です…。
まぁ、次の機会もあるので、それまで楽しみをとっておくことにします。

さて、今回はElementorの技術というより、Elementorで実装するときに悩みがちなフォント選びを”少し”助けてくれるプラグインの紹介です！

WordPressでもAdobe Fontsが使いたい！

Webデザインの制作で、まずPhotoshopでデザインを作ってからWordPressで実装する、という流れで制作していきますが、そもそも

「Photoshopで時間かけて選んだフォントが、WordPressで使えない…」

という問題で更に実装の時に悩んでしまう人いますよね？

特にAdobe Fontsを使っておしゃれな見た目にしていたのに、WordPressでは使えないからと実装が制約されてしまうことも…

今回はそんな悩みを解決するために、Adobe FontsをWordPressで使えるようにするプラグインのご紹介です！

プラグイン「Fonts Plugin | Use Google Fonts, Adobe Fonts or Upload Fonts」の設定方法

このプラグインを使用することで、Adobe FontsをWordPressに連携できて、ちゃんと表示されるようになるんです◎
ただ、注意点もあるので最後までしっかりと読んでください。

プラグインを追加

WordPressの管理画面から「プラグイン」→「新規追加」 →「Fonts Plugin | Use Google Fonts, Adobe Fonts or Upload Fonts」で検索 → インストール＆有効化
有効化できれば、メニューにある「Fonts Pliguin」にカーソルを合わせ、詳細メニューより「Adobe Fonts」をクリックする。

Adobe Fontsでの設定

一旦、WordPressから離れて、Adobe Fonts にログインして、使いたいフォントを選んでください。
フォントが選べたら、「Webプロジェクトに追加」をクリックします。

クリックすると「Webプロジェクトにフォントを追加」のページが表示されるので、順番に
①追加したいフォントのウェイト(太さ)を選択
②「新規プロジェクトを作成」します。これは自分で管理できる名前であれば、なんでも良いです！
　ちなみに私は「Fonts」としています。
③全て設定ができれば「作成」ボタンをクリックします。

「作成」ボタンをクリックすると、次に「◯個のフォントが(プロジェクト名)に追加されました」のページが表示されます。
こちらのページ設定することはありませんので「終了」ボタンをクリックして下さい。

APIトークンについて

「終了」すると、開いているページのまま右上にある「アカウント」ボタンをクリックして、その中にある「APIトークン」をクリックします。

このAPIトークンはWordPressへフォントを追加するために必要になります！
まず、「新しいAPIトークンを作成」します。するとその上に「bc123xyz456789」のような文字列が作成されます。
これがAPIトークンです！
作成されたAPIトークンをコピーをして、やっとWordPressへ戻ります。

再びWordPressへ

WordPressへ戻ると最初に開いていた「Adobe Fonts」の設定画面が開いたままだと思います。
その画面内に「APIキー」があるので、そこへ先ほどコピーしたAPIトークンをペーストします。
ペーストができれば「保存」ボタンをクリックすると、その下へ先ほど使用したいと思って登録したフォントの名前が出てきます。

こちらで完了です！！