フォントのイメージ

【無料で使える】Google Fontsの使い方を徹底解説【日本語もOK】

こんにちは、ミウラアケミ(@akmnred)です。

Web制作をしていて、フォントで変化をつけたい時ってありませんか?

いろんなWebサイトを見ていて思うのですが、フォントひとつでサイトの印象もかなり変わってきますよね。

  • オシャレなWebフォントがなかなか見つからない
  • 日本語にも対応してて、いい感じのWebフォントないかな?
  • 商用利用可能なWebフォントを探している

上記のような要望をお持ちの方に向けて、この記事では無料で使えてフォントの種類も豊富な、デザイナー御用達のWebフォント、Google Fontsの使い方を解説していきます。

Google Fonts(グーグルフォント)とは?

Google Fontsトップ画面

Google Fonts(グーグルフォント)は、その名のとおりGoogleが提供しているWebフォントサービスです。

商用利用もOKで、完全無料で使えます。

Google先生は本当になんでも提供してくれますね。笑

Webフォントって?従来のフォントとどう違うの?

Webフォントというのは、あらかじめサーバー上に置かれているフォントで、使用する際にはサーバーから呼び出してWebサイトに表示します。

従来のフォントは、Webサイトを見る側の端末に依存していました。

つまり、Webサイト制作側でフォントを指定していても、見る側の端末に指定したフォントがインストールされていなければ、指定したフォントを表示させることができなかったんですよね。

見る人の環境によって、フォントはバラバラに表示されていたのです。

その点Webフォントならサーバーから呼び出しているので、見る側の端末に依存することなく、指定したフォントを表示させることができます。

Webフォントのデメリット

誰がどんな環境で見ても、ちゃんと指定したフォントを表示できるのがWebフォントのメリットです。

しかし、メリットもあればデメリットもあります。

サーバーからフォントを読み込むため、従来のフォントに比べると表示速度が遅くなってしまうのです。

とはいえ複数のフォントを読み込むとかしなければ、特に気になるほどではありませんのでご安心ください。

Google Fonts(グーグルフォント)の使い方

Google Fontsの導入方法、使い方について詳しく解説していきますね。

導入方法

Google Fontsのサイトを開きます。

GoogleFonts_フォント一覧

すると、このようにフォント一覧が表示されます。

このスクショでは6書体しか表示されていませんが、下にスクロールしていくと膨大な数のフォントがびっしりと並んでいます。(2019年8月7日現在で940フォント)

GoogleFonts_検索窓

目的のフォントがある場合は、検索窓にフォント名を入力し、検索しましょう。

特に目的のフォントがない場合、膨大なフォントの中から理想のフォントを探し出すのは大変です。

そんな時は絞り込み機能を利用しましょう。(後ほど解説します。)

ここでは、「Lato」というフォントを使いたいと仮定しましょう。

GoogleFonts_フォント名で検索

まずはフォント名「Lato」で検索します。

GoogleFonts_フォントを追加

検索結果が表示されるので、右上の「+」マークをクリックしてフォントを追加します。

GoogleFonts_追加したフォントを確認

すると、このように右下にある黒いボックスにフォントが追加されます。

このボックスの右にある「-」マークをクリックするとウィンドウが開かれ、htmlとcssに貼り付けるフォント読み込み用コードが表示されます。

GoogleFonts_読み込み方法

フォントの読み込み方法は「STANDARD」「@IMPORT」の2パターンから選べますが、好みの方法でいいと思います。

今回は「STANDARD」の方で進めていきます。

GoogleFonts_読み込み方法2

上記のコードをコピーし、フォントを読み込みたいhtmlファイルの<head></head>タグ内にペーストします。

GoogleFonts_読み込み方法3

次にfont-family: …の記述を、フォントを指定したい要素のcssに追加します。

例えば<p>タグのフォントに「Lato」を指定するなら、下記のように書きます。

これで特定要素のフォントをGoogle Fontsに変更することができました。

カンタンですよね!

フォントを絞り込む方法

「Categories」からフォントの書体別に絞り込むことができます。

GoogleFonts_カテゴリー絞り込み

カテゴリーの意味は下記のとおり。

  • Serif → 明朝体
  • Sans Serif → ゴシック体
  • Display → 装飾文字
  • Handwriting → 手書きフォント
  • Monospace → 等幅フォント

チェックボックスのチェックが入っている書体だけ絞れるので、ゴシック体だけ探しているのなら、「Sans Serif」にだけチェックを入れて検索すればOKですね。

複数フォントもまとめて読み込みOK

フォントを複数同時に読み込むこともできます。

GoogleFonts_複数フォント追加

やり方はフォントを1つ追加した時と同じ。

注意点としましては先にも述べましたが、複数のフォントを読み込めば、その分表示速度が遅くなるということ。

これは覚えておきましょう。

サンプルテキストを任意の文字に置き換えて表示確認ができる

Google Fontsのサイトでは、あらかじめサンプルテキストが表示されていますが、これ実は任意の文字に変更することができるんです。

GoogleFonts_サンプルテキスト削除

サンプルテキストを全選択しdeleteキーで削除。

GoogleFonts_サンプルテキストを任意の文字へ

あとは表示確認したい任意の文字を入力するだけ。

Google Fontsのサイト上で表示確認がお手軽にできるのでありがたいですよね。

日本語フォントも使えるよ

Google Fontsには日本語フォントもあります。

日本語フォントもカンタンに絞り込むことが可能です。

GoogleFonts_日本語フォント絞り込み

「Language」から「Japanese」を選択します。

GoogleFonts_日本語フォント絞り込み3

日本語フォントのみに絞り込まれましたね!

フォントの読み込み方などは欧文フォントとまったく同じになります。

日本語フォントは種類が少ないですが、とはいえ対応してるのが嬉しいですね。

まとめ

フォントのイメージ

Google Fonts(グーグルフォント)の導入方法、使い方について解説してきました。

膨大な種類の中からフォントを選び放題なので、オリジナリティ溢れるサイト制作に上手く活用していきたいですよね。

関連記事

  1. 【FTP不要】WordPressのサーバー移行はAll-in-One WP Migrationで決まり【10分で完了】のアイキャッチ

    WordPress

    【FTP不要】WordPressのサーバー移行はAll-in-One WP Migrationで決ま…

    「All-in-One WP Migration」というプラグインを使…

  2. アラサー未経験でWebエンジニアに転職_アイキャッチ

    プログラミング

    【アラサー完全未経験】高卒で文系でもWebエンジニアに転職できた話【実体験】

    主体性を持って行動を起こしていけば、アラサーだろうが未経験だろうが高卒…

  3. はじめてのテーマ_アイキャッチ

    WordPress

    【制作期間10時間】WordPressのテーマ自作に初チャレンジ!【意外とカンタン】

    自作してみるまでは「めちゃくちゃ難しいんじゃないか」とハードルを感じて…

  4. xamppのmysqlのパスを通す方法

    プログラミング

    【Mac OS】XAMPPのMySQLのパスを通す方法

    プログラマーたるもの、やはり黒い画面にコマンドをパチパチ打ち込んで、な…

  5. サーバーのイラスト

    PHP

    【2019年版】無料レンタルサーバーのおすすめ3選【PHP、MySQL使用OK】

    プログラミングやコーディングの学習をしていると、せっかくだったら成果物…

  6. WP_任意の抜粋文_アイキャッチ

最近の記事

  1. 和泉リサイクル環境公園の菜の花
  2. 大阪駅
  3. 黒門市場
  4. 成長
  5. 【FTP不要】WordPressのサーバー移行はAll-in-One WP Migrationで決まり【10分で完了】のアイキャッチ

アーカイブ

PAGE TOP