特定の場所のフォントを変更

By /

サイトのフォントを変更する場合、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;
 }

以上のコードの入力で、該当する記載部分のフォントが変更された事が分かります。英文字・漢字とも本文の文字とフォントが変更されているのが分かります。

上部へスクロール