例えば、Google fontのKlee Oneを使いたい場合は、Get embed code のボタンを押して、表示される Embed code in the <head> of your html を Arkhe Toolkit 設定 の コード追加 の <head>タグ内に出力するコード に貼り付ける。
その後、CSSに以下のコードを書くとOKだ。
body {
font-family: "Klee One", cursive;
font-style: normal;
}
管理画面のエディター部にもフォントを使いたい場合は、
子テーマのfunctions.phpにこのコードを追加する。
function add_custom_fonts_to_admin() {
echo '
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap" rel="stylesheet">
';
}
add_action('admin_head', 'add_custom_fonts_to_admin');
これで、管理画面側にもGoogle fontが読み込みされる。
Arkhe CSS Editor プラグインを使い、エディタ用のCSSに以下のコードを追加する。
.block-editor .editor-styles-wrapper, .blocks-widgets-container .editor-styles-wrapper, .wp-block-widget-area, body.editor-styles-wrapper{
font-family: "Klee One", cursive;
font-style: normal;
}