ウェブデザイナーを目指して独学で勉強している方、フォント選びに迷っていませんか？
そもそもフォントとwebフォントって何が違うの？
フォントが沢山あって、どれを選べばいいか分からない！
私も独学でウェブデザインを勉強していて、こんな疑問を抱いていました。
今回は、そんなウェブデザイン制作にとって欠かせないwebフォントについて解説していこうと思います。
目次
そもそもwebフォントとは
Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを呼び出し、表示するCSS3から策定された技術です。
参考URL：Webフォントとは？Webフォントを利用してWebサイトのデザイン性を高めよう
硬い文書にすると上記なのですが、なんのこっちゃ良く分かりませんね。
webフォントをもっと簡単に解説します。
まず、ウェブサイト（インターネット）上で表示できるフォントは限られています。
illustrator（イラストレーター）やphotoshop（フォトショップ）で、文字を選択したときは下の図のように沢山の選択肢がありますよね。
印刷物（例えば名刺やポスター・フライヤー）を作る際はどのフォントを使用しても問題はありません。
しかし、ウェブデザインは違います。
残念なことに、印刷物とは違って、使えるフォントは決まっています。
それは、ウェブサイト（インターネット）上で表示できるフォントと表示できないフォントがあるから。
フォントはあくまでデザインの一部なので、ウェブサイト（インターネット）上でフォントを文字情報として認識させるには、フォントをデータとしてサーバーに用意しなくては、表示出来ません。
そして、「google chrome」や「safari」などデバイスの違いによっても標準としている表示ルールが異なります。
会社が違えばルールも違いますからね。
そこで、「ウェブ上でももっと便利にフォントを使えるようにしよう！」と開発されたのが、webフォントなのです。
webフォントはサーバー上（インターネット上）にデータが用意されており、デバイス間の違いもなく問題なく表示させることが出来ます。
webフォントを使うメリット
先ほど説明した中にも少し挙げましたが、メリットをまとめておきます。
メリット1：デバイス間の違いなくデザイン性を保ったまま表示できる
webフォントを使用すると、ユーザーの環境・デバイス間の違いに左右されず、デザイン性を保ったまま文字をウェブサイトに表示することができます。
文字のデザイン性が保たれると、文字の可読性や視認性や意図した印象をユーザーに与えることができます。
メリット2：レスポンシブ対応
レスポンシブ ウェブデザイン: ユーザーのデバイスの種類（パソコン、タブレット、モバイル、非視覚的ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しつつ、画面サイズに応じてレンダリング方法を変更します。
参考URL：google「モバイル設定を選択する」
レスポンシブ対応とは、デバイスの種類（パソコンやスマートフォンなど）の違いに対応させたレタリングです。
昔はインターネットを見るにはパソコンしか手段がありませんでした。
しかし、近年はスマートフォンやiPadなど様々なデバイスの普及によって、ウェブサイトも色んな画面サイズ・デバイスで見たときを想定しなくてはならなくなりました。
webフォントは、画面のサイズ・デバイスの違いに左右されずに表示することが出来ます。
webフォントの使い方
肝心のwebフォントの使い方・指定方法を紹介します。
webフォントはCSSで指定します。
記述方法もちょっとした違いがあったりするのですが、””（ダブルクォート）で囲むか囲まないかは、微妙なところなので、閲覧する環境に合わせて変更してください。
日本語対応フォントで、ウェブサイトに良く使われる3つをピックアップしています。
日本語表記・アルファベット表記は、古いブラウザではどちらか一方にしか対応していないということがあるので、両方記述します。
ヒラギノ
ヒラギノフォントは種類が沢山あります。
一例として「ヒラギノ角ゴProN」の指定方法を紹介します。
メイリオ
游ゴシック（注意）
詳しいことは今回は省きますが、使用するときは、下記サイトを参考にしてみてください。
Google Fontsの使い方
「Google Fonts」とはGoogleが用意しているwebフォントです。
かなり沢山のwebフォントが用意されていますので、ウェブデザイナーは非常に良く使うサイトになっています。
「Google Fonts」はコーディングで下記2つの工程を踏むと反映できます。
この2つを指定して使用できるようになります。
今回はこちらのサイトの使い方を紹介していこうと思います。
公式サイト：Google Fonts
Google Fontsの画面の説明
まずは画面の説明から。
サイトを開くと、上記の画像のような画面が出てきます。
左上の「Search」は探したいフォント名を指定できます。↓
画面上部、中央にある「Type something」には表示したい文字列を入力できます。↓
画面上部、右にあるpxは、表示したいフォントのサイズを変更できます。↓
「Categories」はセリフ体、サンセリフ体などを指定できます。↓
「Languages」では日本語、英語などの言語を指定できます。↓
「Font properties」ではフォントのプロパティ（ウエイトや傾き）などを絞って検索できます。
フォントをローカルにダウンロードする方法
1.まず、任意のフォントを選んで、クリックします。
2.画面右上の「Download family」をクリックします。
3.ダウンロードしたファイルを開いて「フォントをインストール」をクリックする。
windowsも同じような項目があるかと思います。
フォントをCSSとlinkタグで指定する方法
1.まず、任意のフォントを選んで、クリックします。
2.欲しいフォントのウェイトを選んで、「＋Select this style」をクリックする。
3.①Embedタブに切り替える。
②表示されているCSS（font family）とlinkタグをheadタグの中にコピー＆ペーストする。
これでGoogle Fontsのwebフォントが使えるようになります！！
Google Fontsでおすすめのフォント！Noto Sans JP
最近ウェブサイトでよく使われているのが「Noto Sans JP」です。
こちらのフォントは日本語に対応しています。
クセがなく大きさが揃ったひらがな・カタカナは、ラップトップ、スマートフォン、タブレットなどの様々なデバイスのユーザーインターフェースとしても使いやすく、また伝統的な文字の優美さを受け継いだ形はウェブコンテンツや電子書籍などの長文を読むのにも適しています。他、どのような用途でも使える汎用性を考慮した書体となっています。
参考URL：Google Developers
公式サイトの説明にもありますが、クセがなく読みやすいデザインで、可読性にも配慮されています。
とにかくおすすめ！
まとめ
ここまでwebフォントについて紹介してきました。
ウェブデザインを作成する上で欠かせない知識ですので、頑張って覚えていきましょう！
