サイトのフォントを変更する場合、Webフォントを特定の場所・・・ここでは、コンテンッの説明部で、説明用のソースコードを示すために、背景色を設定した、preタグ、ブロック編集ではpタグで背景色が設定されている部分に、Webフォントを指定する方法です。
公開されているWebフォントを決める
グーグルのサイトでは、色々なWebフォントが公開されています＞サイトはこちら
サイトから、気に入ったフォントをクリックすると、画面の右側に、LinkとCSSコードが表示されます。このコードをWordPressのプラグインのHeader Footer Code Managerをインストールし、Link情報はこのプラグインに記述します
Header Footer Code Manager
WordPressのプラグインの項目で、新規追加で上記の名前で検索し、ヒットしたプラグインをインストールし、有効化します
プラグインの本項目の設定をクリックし、Add New Snippetボタンをクリックし、出てきた画面でSnippet Nameに、任意の文字Linkを入力し、下の方にスクロールすると、Snippet / Code欄が出てくるので、下記のリンクを記入します
<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=Karla:wght@300&family=M+PLUS+1+Code:wght@200;300&family=Montserrat:wght@200;300&display=swap" rel="stylesheet"> （リンクの記載内容）
CSSコードの追加
CSSコードは、テーマのカスタマイズで追加CSSの欄に下記の内容を記載します。内容は、Preタグと、段落ブロックで背景に色が付いている場合に、フォントを適用するようにします。フォント指定に下記のコードを記載します。
pre, .has-background-color {
font-family: 'M PLUS 1 Code', sans-serif;
}
以上のコードの入力で、該当する記載部分のフォントが変更された事が分かります。英文字・漢字とも本文の文字とフォントが変更されているのが分かります。
