このページでは、Nishiki Pro に Adobe から提供されているウェブフォント(Adobe Fonts)を適用する方法について解説しています。
今回は、Adobe Fonts の中から日本語フォントを適用してみましょう。
フォントを変更すると、ウェブサイトの雰囲気がガラッと変わります。一気にかっこよくなりますね!
![](https://support.animagate.com/wp/wp-content/uploads/2020/04/wp-nishiki-adobe-fonts00-1280x720.png)
Nishiki Pro に Adobe Fonts を適用する方法
Adobe Fonts のウェブサイトで「Japanese」と検索 すると、下のように一覧が表示されます(要ログイン)。
![](https://support.animagate.com/wp/wp-content/uploads/2024/02/wp-nishiki-font-change000-1280x611.png)
次に、使いたいフォントを選び、コード埋め込みのアイコン「</>」を選択してください。
![](https://support.animagate.com/wp/wp-content/uploads/2020/04/wp-nishiki-adobe-fonts00001.png)
プロジェクト名を作るか既存のプロジェクト名を選択します。
![](https://support.animagate.com/wp/wp-content/uploads/2020/04/wp-nishiki-adobe-fonts00002.png)
プロジェクト名はわかるようにつければ OK だと思います。「作成」ボタンを押しましょう。
![](https://support.animagate.com/wp/wp-content/uploads/2020/04/wp-nishiki-adobe-fonts00003.png)
下の画像のようにコードが表示されれば OK です。
※選択したフォントによって埋め込みコードの内容が変わりますので、注意してください。
![](https://support.animagate.com/wp/wp-content/uploads/2020/04/wp-nishiki-adobe-fonts000043.png)
次は、このコードを Nishiki Pro テーマに設定しましょう。
スクリプトを追加しよう
まず、下の画像の埋め込み用のコードをコピーします。
![](https://support.animagate.com/wp/wp-content/uploads/2020/04/wp-nishiki-adobe-fonts000041.png)
次に、ワードプレスの管理画面から「Nishiki Pro」→「一般設定」を選択し「スクリプト追加」のタブを選択します。
下の画像のように「出力を有効にする」にチェックを入れて、コピーしたコードを貼り付けましょう。
![](https://support.animagate.com/wp/wp-content/uploads/2020/04/wp-nishiki-adobe-fonts00007-1280x392.png)
font-family の設定
次に、font-family を設定します。下の画像中の font-family の値(今回の例では「ta-kai-regular, sans-serif」)をコピーします。
![](https://support.animagate.com/wp/wp-content/uploads/2020/04/wp-nishiki-adobe-fonts000042.png)
ワードプレスの管理画面から「Nishiki Pro」→「一般設定」を選択し「フォント」タブを選択します。
下の画像のように、コピーしたコードを貼り付けます。
![](https://support.animagate.com/wp/wp-content/uploads/2020/04/wp-nishiki-adobe-fonts00006.png)
以上で作業完了です。
Adobe Fonts がウェブサイト全体と、ブロックエディターの編集エリアに適用されます。
Adobe Fonts の指定に加え、Windows や Mac などに標準で入っているシステムフォントも合わせて指定するのもいいと思います。
ぜひやってみてください!
WordPress テーマ Nishiki Pro
![](https://support.animagate.com/wp/wp-content/uploads/2020/04/wp-nishiki-pro-2020-846x720.png)
「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載したワードプレステーマです。
ブロックエディター機能を強化し、これまでのワードプレスでは難しかったコンテンツが簡単に作れます。
ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイト、オンラインショップなど、様々な目的のウェブサイトに対応できるテーマです。
最新情報をチェック!
![](https://support.animagate.com/wp/wp-content/uploads/2020/04/nishiki_ac_CMYK-1.png)
Nishiki / Nishiki Pro テーマに特化した情報を「にしきちゃん」がお伝えします😀
- リリース情報
- 新機能の紹介
- 便利な使い方
- 開発中の機能紹介
- 導入事例
- あるある日常ネタ
など