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

2020.03.11
スポンサーリンク

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

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

モリサワのフォント

最近見たサイトの中で1番好きなのが UQ mobile

【公式】UQ mobile（モバイル）│安心・お得の格安スマホ/格安SIMで【顧客満足度No.1】
UQ mobile（モバイル）の公式サイトです。格安スマホ、SIMへ乗り換えるなら、格安SIMサービス顧客満足度no.1のUQ mobile（モバイル）！新スマホがぞくぞく登場、充実なラインナップでサポートも充実！家族割で更にお得に！
www.uqwimax.jp

色使いが攻めまくってます。あれだけビビッドな色をたくさん使っているのにゴチャゴチャしておらず、サイト全体が醸し出す雰囲気・統一感がとってもオシャレです。※個人の意見です

どんなフォントを使っているのか調べてみると、その中の1つにモリサワのフォントがありました。

UD デジタル教科書体

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

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

だいぶ脱線しましたが、UQ mobile で使われているのはそれとは違うモリサワのフォントで、私が調べた限りですが無料では無さそうです。

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をコピーしました