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

2020.03.11

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

モリサワフォントをWebサイトで使いたい！と思って調べていく中で見つけたのが Google Fonts 。

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

スポンサーリンク

Google Fonts 設定方法

かなりの種類がありますので、カテゴリーや言語で絞り込みながら気になったフォントをピックアップしていきます。

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

選択したフォントのコードを取得する

選択したフォントのHEAD用コードは「メニュー」からコピーできます。

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

Reviewで選択したフォントを確認し、<link>用に表示されているコードをコピーします。

/** サンプル**/
<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をコピーしました