アフィリエイト広告を利用しています

Arkhe(WordPressテーマ)にGoogleフォントを使う手順

例えば、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;
}

この記事を書いた人

大東 信仁

カンパチが好きです。

プロフィールはこちら

10月14日開催 参加者募集中
(画像をタップ→詳細へ)

ミッションナビゲート モニター
(画像をタップ→詳細へ)

広告