Web制作

無料で使えるGoogle Fontsの使い方【商用利用可&日本語フォントあり】

色々なフォントを使ってみたいけどいいサイトない?

ちょっと個性的だったりカッコいいフォントを使ってみたいという方におすすめなのが『Google Fonts(Googleフォント)です。

また、コーディング案件でも非常によく使います。

今回はこのGoogle Fontsの使い方について解説していきたいと思います。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


Google Fontsとは?

Google FontsはGoogleが提供する無料で使えるWebフォントのサービスで、商用利用も無料となっています。

フォントの種類は1442種類もあります(2022年9月現在)

2020年5月時点では989種類だったので、どんどん増えているのが分かります。

 

Webフォントとデバイスフォントの違い

Google Fontsは『Webフォント』ですが、閲覧する端末にインストールされてるフォントを『デバイスフォント』といいます。

それぞれの違いは以下になります。

デバイスフォント

デバイス(端末)にインストールされているフォント。
表示されるフォントは端末によって決まる。

Webフォント

サーバ上に置かれていたり、インターネット上で配布されているフォント。
表示されるフォントはデバイスに影響されず全て同じように表示される。

 

Webフォントのメリット

Webフォントのメリットはこちらになります。

  • どのデバイスでも同じように表示される
  • 個性的なフォントを使える
  • 凝ったフォントも画像にしなくて済むのでSEO的に有利
  • 画像ではないので修正が簡単

デバイスフォントは端末にインストールされてるフォントしか表示できないので、端末によってバラつきが発生します。

例えば、

  • Windowsではヒラギノは表示されない(購入する必要あり)
  • Androidでは明朝系は表示されない

など・・・

しかしGoogle FontsはWebフォントなので、端末の種類に関係なく共通のフォントを表示させることが出来ます。

なぜWebフォントは端末の種類に依存されないのかというと、端末にインストールされているフォントではなくサーバーから読み込む為です。

端末の種類に関係なく共通のフォントを表示できるので、Web制作(コーディング)の実務でも非常によく使われます。

また凝ったフォントについては画像を使用することも多いのですが、画像だと検索エンジンに文字情報として認識されないのでSEO的に不利になります。

さらに画像だと修正もフォントに比べ手間がかかるので、保守性に関しても画像よりメリットがあると言えます(「フォントは画像で」という案件はすごい大変でした)

 

Webフォントのデメリット

先ほど書いたとおりGoogle FontsはWebフォントでサーバーから読み込んでいるため、フォントの種類や太さが多いほどページの読み込み速度が遅くなります(重くなる)

特に日本語フォントは英語フォントと違って『ひらがな・カタカナ・漢字』と種類がたくさんあるので、より読み込みが遅くなります。

コーディング案件でもよく使われる『Noto Sans JP』も日本語フォントですが、使う場合はこの他に英字フォントが1種類と合わせて2種類というパターンが多いです。

もし多数のGoogle Fontsを使っているデザインだったら、デザイナーさんがページの読み込み速度のことを知らない可能性があるので、ひとこと助言しても良いかも知れません。

その他Google Fonts以外のWebフォントでは有料だったり、無料でも利用規約があったりするのでご注意下さい。

 

Google Fotnsの使い方

それでは本題に入っていきます。

おおまかな手順は以下になります。

  1. 公式ページにアクセス
  2. フォントを探す
  3. フォントの太さなどを選択
  4. コードをコピーしてHTMLやCSSに貼る or ダウンロードして使用

Google Fontsの使い方は『サーバーから読み込む方法』と『ファイルをダウンロードして使う方法』の2種類あります。

まずは一般的と思われる『サーバーから読み込む方法』から解説していきます(ダウンロードして使う方法も途中までは同じです)

また、Google Fontsの効率的なフォントの探し方については最後に解説しているので参考にしてみて下さい。

 

サーバーから読み込む方法

まずはGoogle Fontsの公式サイトにアクセスします。

Google Fonts公式サイト

するとこちらが表示されます。

Google Fonts:トップページ

Google Fonts:トップページ

現在1442種類のフォントがあるのが確認出来ます。

それでは何か適当なフォントを選んで使ってみたいと思います。

下にスクロールしていけばどんどん表示されていきます。

今回は『Dancing Script』というフォントを使ってみます。

Google Fonts:Dancing Script

Google Fonts:Dancing Script

上の赤枠をクリックするとこちらが表示されます。

Google Fonts:Styles

Google Fonts:Styles

太さ別のサンプルテキストですね。

テキストの内容は左上の赤枠内で変更可能です(上記はデフォルトのテキスト)

そして右側に太さが表示されているので、今回は『Regular 400(font-weight: 400;)』と『Bold 700(font-weight: 700;)』を選択します(クリックすればOKです)

選択するとこのようになります。

Google Fonts:font-weight選択

Google Fonts:font-weight選択

そして画面右上のアイコンをクリックします。

アイコンの右上に赤丸があれば何かしらフォントが選択されている状態となります。

Google Fonts:View selected families

Google Fonts:View selected families

そしてこちらが表示されます。

Google Fonts:Selected family

Google Fonts:Selected family

上の赤枠(<link>)がHTMLのheadタグに貼り付けるコードで、下の赤枠がCSSに書くfont-familyになります。

具体的にはこのようになります。

<!DOCTYPE html>
<html lang="ja">
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />
    <title>ページタイトル</title>
    <meta name="description" content="ページの説明(120文字以内)" />
    <!-- ファビコン -->
    <link rel="icon" href="favicon.ico" />
    <!-- アップルタッチアイコン -->
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
    <!-- OGP -->
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet"/>
    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  </body>
</html>

『Google Fonts』の3行ですね。

その他にも色々書いてありますが、headタグの書き方については以下の記事を参照下さい。

参考記事
【コピペOK!】HTMLのheadタグの書き方を解説
【コピペOK!】HTMLのheadタグの書き方を解説

続きを見る

CSSはこちらです。

body {
  font-family: 'Dancing Script', cursive;
}

上記はbodyタグに対してなのでサイト全体にこのフォントが適用されますが、もちろん特定の部分にすることも出来ます。

.sample-text {
  font-family: 'Dancing Script', cursive;
}

また、複数のフォントが選択されている場合はこのようになります。

Google Fonts:Selected family(複数フォント選択時)

Google Fonts:Selected family(複数フォント選択時)

そして複数選択時のHTMLはこのようにまとめて書くことが出来ます(ちょっと長くて見にくいですが)

<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Roboto:wght@300;500&display=swap" rel="stylesheet">

また、選択しているフォントを削除したい時は赤枠内のマイナスボタンをクリックすればOKです。

それでは最初のフォントだけ使ってどう表示されるか確認してみましょう。

まずはGoogle Fonts使用前がこちら。

Google Fonts未使用

Google Fonts未使用

そしてGoogle Fonts使用後がこちらです。

Google Fonts:英語フォント(じゅんぺいブログはWeb制作ブログです)

Google Fonts使用:英語フォント

フォントが変わったのが分かると思いますが、変わったのは英語の部分だけです。

なぜなら使用したフォントは英語フォントだからです。

Google Fontsにも日本語フォントはありますが、1442種類中51種類しかありません(2022年9月現在)

Google Fonts:日本語フォント選択

Google Fonts:日本語フォント選択

2020年5月の時点では989種類中8種類しかなかったのでかなり増えましたが。。。

せっかくなので日本語フォントを使ってみたいと思います。

Google Fonts:日本語フォント(じゅんぺいブログはWeb制作ブログです)

Google Fonts:日本語フォント

日本語フォントだと日本語も英語も変わりましたね。

 

ダウンロードして使う方法

ダウンロードして使う方法ですが、フォントと太さを選択するところまではサーバーから読み込む方法と同じです。

こちらの画面になったら左上の『Download family』か、右下の『Download all』をクリックしてファイルをダウンロードします。

Google Fonts:ファイルダウンロード

Google Fonts:ファイルダウンロード

こちらがファイルの中身です。

Google Fonts:ダウンロードファイル

Google Fonts:ダウンロードファイル

選択していたのは『Regular』と『Bold』だけでしたが、ファイルだと全種類ダウンロードとなります。

なので使うファイルだけ取り出しましょう。

サイトのファイル構成は以下のようにしてみます。

Google Fonts:ダウンロードファイル使用例

Google Fonts:ダウンロードファイル使用例

fontフォルダ内に使用する太さのファイルだけ入れます。

ダウンロードしたフォントファイルはheadタグで読み込むのではなく、CSSで読み込みます。

@font-face {
  font-family: "DancingScript";
  src: url("../font/DancingScript-Bold.ttf"),url("../font/DancingScript-Regular.ttf");
} 

font-familyの名前は任意なので、分かりやすい名前にしておけばOKです。

srcurlは複数ある場合はカンマで区切って繋げられます。

あとはファイルがある場所までの相対パスとファイル名を書きます。

そしてフォントを使用したい箇所に対しての書き方はサーバーからの読み込みの時と同じで、こちらからコピーして使いましょう。

Google Fonts:font-family

Google Fonts:font-family

あとは太さをfont-weightで指定すればOKです。

body {
  font-family: "Dancing Script", cursive;
  font-weight: 400;
}


Google Fontsの効率的なフォントの探し方

最後にGoogle Fontsの効率的なフォントの探し方を解説します。

またトップページから見てみます。

Google Fonts:検索画面

Google Fonts:検索画面

主にこの赤枠で囲った所を使って探していきます。

  • Search fonts:検索フォームで探す
  • Categories:カテゴリーから探す
  • Language:言語から探す
  • Font properties:フォントの特徴から探す
  • Sort by:並び順変更

 

検索フォームで探す(Search fonts)

これは探したいフォント名が分かっている場合に限りますが、一番早く探し出せる方法です。

これは特に解説するまでもないですが、左上の『Search fonts』に入力して検索するだけです。

 

カテゴリーから探す(Categories)

次は検索フォームの下にあるカテゴリーから探す方法です。

Google Fonts:Categories

Google Fonts:Categories

 

Serif明朝体:283種類
Sans Serifゴシック体:532種類
Displayディスプレイ用(装飾文字):377種類
Handwriting手書き風:221種類
Monospace等幅(文字の幅が均等):29種類

※種類は2022年9月現在

カテゴリーを1つずつ見て、自分が探したいフォントの雰囲気で選んでみるといいと思います。

ざっくり言うとDisplayとHandwritingは個性的なフォントが多いです(上2つも結構個性的なフォントはありますが)

複数選択することも出来ます。

 

言語から探す(Language)

日本語フォントなどを探したい時はこれが良さそうです。

Google Fonts:Language

Google Fonts:Language

横のスクロールバーから言語の数はある程度推測出来るかと思います。

ちなみに日本語フォントは51種類ありました(2022年9月現在)

 

フォントの特長から探す(Font properties)

次はフォントの特長から探してみます。

Google Fonts:Font properties

Google Fonts:Font properties

これも説明がないとちょっと分かりにくいですね。

Number of styles(スタイルの数)右に行くほど種類が多いものに絞られる
Thickness(太さ)右に行くほど太くなる
Slant(傾き)右に行くほど傾きが強くなる
Width(フォント幅)右に行くほど幅が広くなる

Number of styles(スタイルの数)ですが、フォントによっては太さが数種類あり斜体も含めると10種類以上あるフォントもあります。

スタイルの数は一覧の右上に書いてあります。

Google Fonts:フォントスタイルの数

Google Fonts:フォントスタイルの数

また、Number of styles(スタイルの数)だけは右に行くほど種類が多いものだけ絞られる感じですが、他の項目は違います。

例えば Thickness(太さ)では、

  • 一番左だと一番細いフォントだけ
  • 中間だと中くらいの太さだけ
  • 一番右だと一番太いフォントだけ

となります。

つまりスライダーの位置にあるものだけ表示される感じです。

 

並び順を変えてみる(Sort by)

並び順を変えることも出来ます。

表示される並び順を変えるだけなので探すとはちょっと違いますね。

Google Fonts:Sort by

Google Fonts:Sort by

Trendingトレンド(流行)順
Most popular人気順
Newest新着順
Nameアルファベット順

トレンド順と人気順は少し似ているような気もします(どちらもこの時の1番目はRobotoでした)

 

サンプル文字の表示を変える(Sentence)

これは探し方とはちょっと違いますが、サンプルとして表示されている文字を変えることが出来ます。

ちなみにこの画像のサンプル文字はSentence(見出し)で表示されています。

Google Fonts:Sentence

Google Fonts:Sentence

Sentence見出し(短文)
Alphabetアルファベット(全ての大文字と小文字)
Paragraph長文
Numerals数字(0から9まで)

そして『Custom』を選択して『Type something』にテキストを入力するとそれが表示されます。

Google Fonts:Sentence(Custom)

Google Fonts:Sentence(Custom)

表示を確認したい文章などがあったらここで確認してみてもいいでしょう。

あとはその横でフォントサイズを変える事も出来ます。

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作
-