メニュー

WordPressでGoogle Fontsを使用する手順

WordPress
当ページのリンクには広告が含まれています。
wordpress
  • 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サーバーにアップロードして読み込む方法です。この場合

フォントファイルをダウンロードする
使用する文字だけのフォントファイルを作成する

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

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

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

あわせて読みたい
?T?u?Z?b?g?t?H???g???[?J?[

サブセットフォントメーカーのインストールに付いては、Windows、Macともにダウンロードファイルを実行するだけですので省略します。

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

フォントに格納する文字

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

U-618WEB
日本語WEBフォントをサブセット化する際の参考文字列一覧 | U-618WEB WEBフォントをサブセット化して使用する際に参考になるかもしれない文字列一覧です。 Noto sansの軽量化
WEB向けの軽量化フォントファイル（WOFF形式）に変換する

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

あわせて読みたい
WOFF?R???o?[?^

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接続して、作成したフォントファイルをアップロードします。

WordPress
よかったらシェアしてね！
  • URLをコピーしました！
目次