色々なサイトのデザインやフォントを見るのが好きなのですが、特に最近気になっているのが「モリサワのフォント」。
Windows10 あたりから Excel や PowerPoint などで UD デジタル教科書体 という超見やすいフォントが使える様になりました。それを作ったのがフォントメーカーのモリサワさん。
残念ながらUDはありませんでしたが、Google Fontsでは996種類 (2020.3.12時点) ものオシャレなWebフォントを無料で使うことができます。
Google Fonts の導入方法
とにかく種類が多いので、カテゴリーや言語で絞り込んで検索します。サイトで使ってみたいフォントをいくつかピックアップしてみましょう。
- Google Fonts にアクセス
- 好きなフォントを選ぶ (複数選択OK)
- コードを取得
- 取得したコードを<HEAD>内にコピペ
選択したフォントの確認とコードの取得
選択したフォントや<HEAD>用コードは「メニュー」で確認できます。
- Review:選択したフォントの一覧
- Embed:コードの取得
Review 画面で使用するフォントの最終確認をしてから、Embed に表示された<HEAD>用コードをコピーします。
/** サンプル**/ <link href="https://fonts.google・・・ rel="stylesheet">
HEAD内にコード貼り付け
先程コピーしたコードを <HEAD> ~ </HEAD> 内にペーストします。当サイトはCocoonを使っておりまして、その場合の保存先は以下の通りです。
- テーマエディター ※Cocoon Child
- tmp-user
- head-insert.php

<link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&family=Luckiest+Guy&family=Rubik+Mono+One&family=Sigmar+One&family=Ultra&family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
特定の文字にフォントを適用する
下準備が終わりましたので、ここからはサイトのどの部分にどのフォントを適用するかの設定をしていきます。
先ほど Google Fonts で<HEAD>用のコードをコピーしましたが、同じ画面内に font-family 用のコードも表示されていると思います。そちらをコピーしておいてください。
コードを作成する
font-family については適当なクラス名(ここでは「sample」)を付けて、WordPressの追加CSSなどに以下の様なコードを作成します。
/** CSSサンプル **/ .sample { font-family: 'Baloo Thambi 2'; font-size: 14pt; }
特定の文字だけにフォントを適用
例えば特定の文章だけにフォントを適用する場合、該当箇所をHTMLモードにしてクラスを追加します。
/** サンプル **/ <p class="sample">これが Baloo Thambi 2 のフォントです</p>
サンプルフォント
ワンポイントとして使えそうなフォントを参考までに載せておきます。
Baloo Thambi

Luckiest Guy

Rubik Mono

Ultra

Comment