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