オシャレなフォントが無料で使える！Google Fonts の導入と設定方法

2020.03.11

この世にはたくさんのオシャレなWEBサイトがありますね。全体のデザインやアイデアは真似できるレベルではありませんが、せめてフォントだけでもオシャレにしたいと思っていました。

しかし、クオリティの高いフォントは有料の場合が多く、個人の人気無しサイトでは経費的に手を出しづらいところ。そんな時に知ったのが Google Fonts 。実際に導入してみましたが、設定は予想よりも遥かに簡単でした。

スポンサーリンク

モリサワのフォント

色々なサイトのデザインやフォントを見るのが好きなのですが、その中で気になるフォントが。それがモリサワのフォントです。

UD デジタル教科書体

株式会社モリサワはご存知でしょうか？

Windows10 あたりから Excel や PowerPoint などで UD デジタル教科書体 なる超絶見やすいフォントが使える様になりました。それを作ったのがフォントメーカーのモリサワさんです。私も資料作成の際にかなり多用しているのですが、本当に見やすくて資料感が大幅にUPします。

Google Fonts の導入方法

そして Google Fonts にたどり着いた訳です。

フォントは全部で996種類 (2020.3.12時点)。フォントを選ぶ際はカテゴリーや言語で絞り込み検索をした方が良いです。ますば使うフォントをいくつかピックアップしてみましょう。

設定の流れ
  1. Google Fonts にアクセス
  2. 好きなフォントを選ぶ (複数選択OK)
  3. コードを取得
  4. 取得したコードを<HEAD>内にコピペ

選択したフォントの確認とコードの取得

選択したフォントや<HEAD>用のコードはメニューで確認できます。

名称と役割
  • Review：選択したフォントの一覧
  • Embed：コードの取得

Review 画面で使用するフォントの最終確認をしてから、Embed に表示された<HEAD>用コードをコピーします。

/** サンプル**/
<link href="https://fonts.google・・・ rel="stylesheet">

コードの貼り付け

先程コピーしたコードを <HEAD> ~ </HEAD> 内にペーストします。私は Cocoon を使っており、Cocoon での保存先は以下の通りです。

Cocoonでの保存先
  1. テーマエディター ※Cocoon Child
  2. tmp-user
  3. 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 のフォントです

サンプルフォント

今回私は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

Comment

タイトルとURLをコピーしました