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

2020.03.11

色々なサイトのデザインやフォントを見るのが好きなのですが、特に最近気になっているのが「モリサワのフォント」。

Windows10 あたりから Excel や PowerPoint などで UD デジタル教科書体 という超見やすいフォントが使える様になりました。それを作ったのがフォントメーカーのモリサワさん。

残念ながらUDはありませんでしたが、Google Fontsでは996種類 (2020.3.12時点) ものオシャレなWebフォントを無料で使うことができます。

スポンサーリンク

Google Fonts の導入方法

とにかく種類が多いので、カテゴリーや言語で絞り込んで検索します。サイトで使ってみたいフォントをいくつかピックアップしてみましょう。

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

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

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

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

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

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

HEAD内にコード貼り付け

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

Cocoonでの保存先
  1. テーマエディター ※Cocoon Child
  2. tmp-user
  3. 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 をエックスサーバー経由で使う【レンダリングを妨げるリソース】
GoogleFontsなどwebフォントをエックスサーバーにUPして自前サーバー経由で使用する方法。pagespeed insightsでレンダリングを妨げるリソースと指摘され遅延の原因らしいので試しに比較してみた。
unity-right.com

特定の文字にフォントを適用する

下準備が終わりましたので、ここからはサイトのどの部分にどのフォントを適用するかの設定をしていきます。

先ほど 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

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