このページでは、Nishiki Pro に Adobe から提供されているウェブフォント（Adobe Fonts）を適用する方法について解説しています。

今回は、Adobe Fonts の中から日本語フォントを適用してみましょう。

フォントを変更すると、ウェブサイトの雰囲気がガラッと変わります。一気にかっこよくなりますね！

Nishiki Pro に Adobe Fonts を適用する方法

Adobe Fonts のウェブサイトで「Japanese」と検索 すると、下のように一覧が表示されます（要ログイン）。

次に、使いたいフォントを選び、コード埋め込みのアイコン「</>」を選択してください。

プロジェクト名を作るか既存のプロジェクト名を選択します。

プロジェクト名はわかるようにつければ OK だと思います。「作成」ボタンを押しましょう。

下の画像のようにコードが表示されれば OK です。

※選択したフォントによって埋め込みコードの内容が変わりますので、注意してください。

次は、このコードを Nishiki Pro テーマに設定しましょう。

スクリプトを追加しよう

まず、下の画像の埋め込み用のコードをコピーします。

次に、ワードプレスの管理画面から「Nishiki Pro」→「一般設定」を選択し「スクリプト追加」のタブを選択します。

下の画像のように「出力を有効にする」にチェックを入れて、コピーしたコードを貼り付けましょう。

font-family の設定

次に、font-family を設定します。下の画像中の font-family の値（今回の例では「ta-kai-regular, sans-serif」）をコピーします。

ワードプレスの管理画面から「Nishiki Pro」→「一般設定」を選択し「フォント」タブを選択します。

下の画像のように、コピーしたコードを貼り付けます。

以上で作業完了です。

Adobe Fonts がウェブサイト全体と、ブロックエディターの編集エリアに適用されます。

Adobe Fonts の指定に加え、Windows や Mac などに標準で入っているシステムフォントも合わせて指定するのもいいと思います。

ぜひやってみてください！