[WordPress] ブログの一部をウェブフォントに変更する【Google Fontsを追加する】

2020.05.212022.03.27

ホームページを見ながら、デザインのメリハリをつけたいと思いました。そこで、今回はウェブフォントの変更をした話を書きます。

1. コンテンツ管理システムとテーマ

このホームページはWordPressのCocoonを利用して管理しています。

環境

利用しているシステム・テーマによって、CSSの読み込み・記述をどこにするか変わってきますよー

今回は、Google Fonts にあるフォントを利用しました。

「Language（言語）」から「Japanese（日本語）」を選ぶと、日本語対応のフォントに絞り込まれますので、好きなフォントをいくつか選んでは、「+ Select this style」をクリックします。

Amazonでショッピングカートに商品を入れていくように、フォントを選んでいきます

必要なフォントを選んだら、「View your selected families（選択したフォントファミリーを表示する）」のボタンを押します。

今回は「小杉ゴシック」「M Plus 1p（Light 300）」を選びました。本文には「Noto Sans JP（これはCocoonテーマで指定）」、強調には「小杉ゴシック」、吹き出しには「M Plus 1p」を使う予定です。

「Download families」でフォントをダウンロードすることもできますが、今回は「Embed（埋め込み）」のタブに切替えます。

<link href="https://fonts.googleapis.com/css2?family=Kosugi&family=M+PLUS+1p:wght@300&display=swap" rel="stylesheet">

こちらはHTMLのコードです。HTMLのヘッダー部分に記述すると、指定したウェブフォントをGoogle Fontsに読み込みにいきます（外部CSSで指定しています）。

このサイトの場合は、Wordpressにログインして、設定の「外観」→「テーマエディター」から、編集するテーマが「Cocoon」であることを確認して、「tmp-user」の「head-insert.php」ファイルを編集しました。

ファイルの下の方に貼り付けることで、サイトのどのページでもウェブフォントが読み込まれるようになります。

font-family: 'Kosugi', sans-serif;
font-family: 'M PLUS 1p', sans-serif;

こちらはCSSのコードです。要素のスタイル指定の中でfont-familyに使いたいフォントの方を記述します。

このサイトの場合はさきほど同様に、設定の「外観」→「カスタマイズ」から、「追加CSS」を編集しました。

.speech-balloon {
    font-family: 'M PLUS 1p', sans-serif;
    font-size: 120%;
    font-weight: 500;
    line-height: 1.3em;
}

例えば、「吹き出し」のフォント（や行の高さなど）については、上記のように「font-family」を指定しています。

テーマCocoonでは、本文全体のフォントは簡単に指定できます。

WordPressにログインし、設定の「Cocoon設定」から「全体」を選びます。

「サイトフォント」の「フォント」から好きなフォントを選びます（ここでは「Noto Sans JP」）。

このようにすることで、好きなフォントをイメージに変更することができました。

ご参考になれば、嬉しいです。

こちらもどうぞ

QRコードを読み込むと、関連記事を確認できます。