WordPressでGoogle Fontsを使用する手順

2023年9月30日

当ページのリンクには広告が含まれています。

URLをコピーしました！

生徒

WEBページに無料で使用できるフォントはありますか？

先生

無料で利用できるGoogle Fontsの使い方を説明します

WEBページ制作では、文字の場所や雰囲気に合わせたフォントを使用する必要があります。

ここでは、無料でたくさんのフォントが使用できるGoogle FontsをWEBサイトで使用する手順を説明します。

この記事で分かること

WindowsおよびMacで開くウィンドウを切り替えるショートカットキーの使い方

Google Fonts で使用するフォントを探す

Google Fontsのサイトにアクセスします。

Google Fonts

Browse Fonts – Google Fonts Making the web more beautiful, fast, and open through great typography

さまざまなフォントが表示されますので、検索条件を入力して使用したいフォントを探していきます。

フォントの種類を絞り込む

Categoriesでフォントの種類を以下から選択します。

カテゴリ	説明
Serif	明朝体のように、文字の線の端にハネや払いなどの装飾があるフォント
Sans Serif	ゴシック体のように、文字の太さが均等的で装飾が少ないフォント
Display	ディスプレイ（看板や展示）に適した装飾文字のフォント
HandandWriting	手書き風のフォント
Monospace	等幅（1文字の横サイズが全文字同じ）フォント

言語で絞り込む

Languageでは言語を選択します。日本語のフォントを探す場合はJapaneseを選択します。

フォントの特性で絞り込む

Font Propertiesは以下の条件を指定します。使用したい条件のチェックを入れてからスライダーで値を指定します。

Number of styles以外は数値での指定ではないため、検索結果を見ながら調整します。

スタイル	説明
Nuumber of styles	フォントが持つスタイルの数
Thickness	線の細さ
Sllant	傾斜（左端だと傾斜無し）
Width	文字幅

Show only variable fontsは可変フォントのみを表示するためのオプションです。

可変フォント（バリアブルフォント）は、線幅など文字のスタイルごとにファイルが別れているのではなく、様々な文字スタイルを表現するためのデータが1つのファイルにまとめられている形式のフォントです。ファイルサイズやサーバーへのリクエスト回数を減らすことができます。

フォントのスタイルを決める

使用したいフォントが見つかったらクリックして選択します。

選択したフォントのページが表示されます。

フォントのライセンスに付いて

Google Fontsのフォントは全て、無料で商用利用可ですが、フォントによってライセンスが異なり許諾されている範囲が異なる場合がありますので必ず使用するフォントのライセンスを確認してください、

下にスクロールしてStylesで使用するフォントのスタイルを選択します。

使用したいスタイルのの箇所をクリックします。

選択したスタイルがSelected familyに追加されます。

WEBサイトで使用したいフォントやスタイルが複数ある場合は複数追加します。

別のフォントでも追加して一つにまとめることができます。

「Selected family」が表示されていないときは画面最上部の右端のアイコンメニューを押すと表示されます。

Google Fontsの使用方法

WEBサイトでGoogle Fontを使用するには以下の2つの方法があります。

WEBフォントとしてリンクをWEBサイトに記述する
（手軽ですがパフォーマンスが落ちます）
フォントサイズをWEBサーバーにアップロードする
（フォントファイルの変換とアップロードが必要ですがパフォーマンスがいい）

WEBフォントとして使用する場合

Google Fontsでフォントへのリンクを取得する

使用するフォントをすべて選択したら、画面右側の「Use on the web」の内容を確認します。

方法	説明
<link>	HTMLのheader内で、linkタグによってフォントを取得する。
@import	※この方法は現在では非推奨とされています。 CSS内で、@importによってフォントを取得する。

font-family: 'Raleway', sans-serif;と2つ定義されているのは、1番目のフォントが読み込めなかったときは、2番目の汎用的なフォントが使われるようになっているためです。

WEBサイトにGoogle Fontsのリンクを記述する

次に、WordPressでフォントを読み込みます。WordPressの管理画面メニューで「外観」ー「テーマファイルエディター」を開き「テーマヘッダー(header.php)」を選択して、headタグ内にGoogle Fontsサイトでコピーした “<link 〜”のテキストを全て貼り付けてファイルを保存します。

今度は、フォントを適用するCSSを記述します。「外観」ー「カスタマイズ」

カスタマイズのメニューで「追加CSS」を選択します。

追加CSSのテキストボックスに、フォントを適用したい要素を記述して、その中にGoogle Fontsの下側のCSSを貼り付けます。（下の画像では site-titleクラスにフォントを適用しています。）

WEBサーバーにアップロードして使用する手順

もう一つのやり方は、フォントファイルを使用するWEBサーバーにアップロードして読み込む方法です。この場合

フォントファイルをダウンロードする

使用する文字だけのフォントファイルを作成する

フォントが持つ全ての文字が含まれるファイルだと、ファイルサイズが大きくなってしまいパフォーマンスにも影響します。

そこで、必要な文字だけ含まれるフォントファイルを作成するために以下のフリーソフトを使用します。

サブセットフォントメーカーの使い方

	項目	説明
１	作成元フォントファイル	Google Fontsでダウンロードしたファイルを選択
２	作成後フォントファイル	作成後のファイルをフルパスで入力
３	フォントに格納する文字	ここに入力した文字が作成後のフォントファイルに含まれます
４	作成完了後、WOFFコンバーターを起動する	作成後に作成されたファイルが設定された状態でWOFFコンバータを起動します。

フォントに格納する文字

フォントに格納する文字フォントを使う文字が少ない場合は使用する文字だけを書けばよいですが、フォントを文章で使用する場合は、以下のサイトなどからコピーして使用するのが便利です。

U-618WEB

日本語WEBフォントをサブセット化する際の参考文字列一覧 | U-618WEB WEBフォントをサブセット化して使用する際に参考になるかもしれない文字列一覧です。 Noto sansの軽量化

WEB向けの軽量化フォントファイル（WOFF形式）に変換する

上の手順で作成したフォントファイル（TTF形式）でもCSSで読み込むことはできますが、WEBサイトで使用するのに適した圧縮軽量化形式のフォントファイル（WOFF形式）に以下のツールで変換します。

WOFFコンバータの使い方

WOFFコンバータのインストールに付いてもWindows、Macともにインストーラーをダウンロードして実行するだけですので省略します。

	項目	説明
１	変換前ファイル	上の手順で作成したサブセット化後のファイル
２	作成後フォントファイル	空白のままで構いません。
３	フォントに格納する文字	`WOFF2を作成する`にチェックを入れます。

CSSファイルから読み込める形式に変換されたファイルが作成されます。

CSSファイルを編集する

CSSファイルからフォントファイルを読み込んで使用します。

/* フォントを定義します */
@font-face {
  /* フォントに名前を付けます */
  font-family: "WebSubsetFont";
  /* フォントファイルを読み込みます */
  src: url("../font/MPLUS1-WebSubsetFont.woff2") format("woff2"),
       url("../font/MPLUS1-WebSubsetFont.woff") format("woff");
  /* Internet Explorerは考慮する必要が無くなってきていますので以下でも問題ありません */
  /* src: url("../font/MPLUS1-WebSubsetFont.woff2") format("woff2"); */
}
body {
  font-family: "WebSubsetFont", sans-serif;
}

WEBサーバーにアップロードする

WordPressのサーバーにFTP接続して、作成したフォントファイルをアップロードします。

よかったらシェアしてね！

URLをコピーしました！