この世にはたくさんのオシャレなWEBサイトがありますね。全体のデザインやアイデアは真似できるレベルではありませんが、せめてフォントだけでもオシャレにしたいと思っていました。
しかし、クオリティの高いフォントは有料の場合が多く、個人の人気無しサイトでは経費的に手を出しづらいところ。そんな時に知ったのが Google Fonts 。実際に導入してみましたが、設定は予想よりも遥かに簡単でした。
モリサワのフォント
色々なサイトのデザインやフォントを見るのが好きなのですが、その中で気になるフォントが。それがモリサワのフォントです。
UD デジタル教科書体
株式会社モリサワはご存知でしょうか?
Windows10 あたりから Excel や PowerPoint などで UD デジタル教科書体 なる超絶見やすいフォントが使える様になりました。それを作ったのがフォントメーカーのモリサワさんです。私も資料作成の際にかなり多用しているのですが、本当に見やすくて資料感が大幅にUPします。
Google Fonts の導入方法
そして Google Fonts にたどり着いた訳です。
フォントは全部で996種類 (2020.3.12時点)。フォントを選ぶ際はカテゴリーや言語で絞り込み検索をした方が良いです。ますば使うフォントをいくつかピックアップしてみましょう。
- Google Fonts にアクセス
- 好きなフォントを選ぶ (複数選択OK)
- コードを取得
- 取得したコードを<HEAD>内にコピペ
選択したフォントの確認とコードの取得
選択したフォントや<HEAD>用のコードはメニューで確認できます。
- Review:選択したフォントの一覧
- Embed:コードの取得
Review 画面で使用するフォントの最終確認をしてから、Embed に表示された<HEAD>用コードをコピーします。
/** サンプル**/ <link href="https://fonts.google・・・ rel="stylesheet">
コードの貼り付け
先程コピーしたコードを <HEAD> ~ </HEAD> 内にペーストします。私は Cocoon を使っており、Cocoon での保存先は以下の通りです。
- テーマエディター ※Cocoon Child
- tmp-user
- head-insert.php

さっそくフォントを使ってみよう
先ほど Google Fonts で<HEAD>用のコードをコピーしましたが、同じ画面内に font-family 用のコードも表示されていると思います。
CSSに追加するコード
font-family については適当(適切)なクラス名をつけてCSSにコードを記述します。
/** CSSサンプル **/ .bt2{ font-family: 'Baloo Thambi 2'; font-size: 14pt; }
特定の文字だけフォントを適用
サイト全体ではなく特定のフォントだけに適用する場合は、先ほど作ったクラスを指定します。※ブロックエディターの場合は「HTML として編集」を選択して編集する
/** htmlサンプル **/ <p class="bt2">これが Baloo Thambi 2 のフォントです</p>
これが Baloo Thambi 2 のフォントです
サンプルフォント
参考までに載せておきます。
Baloo Thambi 2
To embed a font, copy the code into the head of your html
Luckiest Guy
To embed a font, copy the code into the head of your html みたいな感じ
Rubik Mono One
To embed a font, copy the code into the head of your html みたいな感じ
Ultra
To embed a font, copy the code into the head of your html みたいな感じ
Comment