![](https://cxg-design.jp/wp-content/uploads/2024/06/googlefont_thumb02.png)
フォントプラグインFonts Pluginで、Google Fontsを使用
Webサイトでは、CSSで全体のフォントのスタイルを指定しています。しかし、WordPressのブロックエディターでLPなどを作成する場合、タイトルや見出しで、サイト以外のフォントも使用します。今回は、フォントプラグインFonts Pluginで、Google Fontsを使用する方法を紹介します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/4630db91a10a90f229e7d1a4d4cf11be.png)
出典 : Fonts Plugin
![](https://cxg-design.jp/wp-content/uploads/2024/06/cfd58725d790fbaf1a0c69b35474b11d.png)
出典 : Google Fonts
今回のDEMOは5種類のフォントです。
Appleを5つのGoogle Fontsで表示しました。
Google Fonts
まず、使用したいGoogle Fontsをサイトから検索します。コードは必要ないので、フォント名とStylesのみ確認します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/3779c7f03c2de054f231781968273bd3.png)
Google Fontsをサイトから検索
ブロックエディター
編集画面を開き、フォントを入れたい場所に、Fonts Pluginブロックを挿入します。Appleを入力し、左右センター揃えに設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/a0ce1a1cd1904854bbcfdba0c850a7ea.png)
Fonts Pluginブロックを挿入
![](https://cxg-design.jp/wp-content/uploads/2024/06/b976db48902cd52675c755da1bb1c139-1.png)
Appleを入力し、左右センター揃えに設定
右サイドメニュー、ブロック>Fonts Plugin>Font Setteingsの設定をします。Block TypeのセレクターからからH1を選択します。FontのセレクターからTekoを選択します。FONT VARIANTのセレクターからMediumを選択します。ブロックエディター上は変化ありませんが、プレビューを確認するとフォントが変更されています。
同じようにAppleをフォントを変更して5つ作成します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/a47899cbf7f65763e00791513ed669b2.png)
Block TypeのセレクターからからH1を選択
![](https://cxg-design.jp/wp-content/uploads/2024/06/5257fd6f6179fcf47f8e568e8d4ca636-1.png)
FontのセレクターからTekoを選択
![](https://cxg-design.jp/wp-content/uploads/2024/06/564024390a8d7240ca7ec074a64d8de9-1.png)
FONT VARIANTのセレクターからMediumを選択
![](https://cxg-design.jp/wp-content/uploads/2024/06/0e49e3b9e66d51d548fbb9e5d7e23470-1.png)
プレビューを確認
![](https://cxg-design.jp/wp-content/uploads/2024/06/b8c51d259488cd8cdd23945750dd3dc9.png)
フォントを変更して5つ作成
ブロックエディターのフォントの変化
Fonts Pluginをインストールして、ブロックエディターを開くと、フォントがゴシック体から明朝体に変わります。外観>カスタマイズ>Fonts Pluginからコンテンツ、見出しなどのフォントをすればブロックエディターのフォントも変更になります。しかし、CSSに記述したスタイルを反映したい場合は変更しません。
これで今回の説明は終了です。CSSなどのコードを使用せずに、Google Fontsを簡単に追加できます。LPでスクリプト体など、デザインに合ったフォントを使いたい場合など、便利なプラグインです。