Webフォントってなに？
Webフォントとは、Webサーバー上にあるフォントデータをネット経由で読み込んで、Webサイト上で表示させる仕組みです。
Webフォントの仕組みを理解するには、まずは昔のWebサイトの作り方を知るとわかりやすいです
Webフォントが登場する前は、Webサイトは、閲覧ユーザーのパソコン内に入っているフォント（＝デバイスフォント）しか表示することができませんでした。
そのため、デザイナーがお洒落なフォントを指定しても、閲覧するユーザー側のパソコンにそのフォントが入っていなければ、別のフォントに置き換えられて表示されてしまいました。
なので、Webフォントが普及する前は、日本のWebサイトのデザインでは、はじめからWindowsに標準搭載されているフォントを中心に使うのが一般的でした。
できる表現が乏しかったので、当時のWebデザインではフォントはそこまで重要視されてなかったんです
どうしてもデザイン性の高い文字表現をしたい場合は、文字をすべて画像として作成するしかありませんでした。
見栄えの良いサイトほど、見出しやボタンはテキストではなく画像でしたね。
このような状況を大きく変えたのが、2010年ごろから普及し始めたWebフォントです。
Webフォントでできるようになったこと
Webフォントは、インターネット上にあるフォントデータをサイトに読み込ませることで、特殊なフォントもサイトで表示することができるようになったものです。
これで、閲覧ユーザー側のPCの環境に左右されることなく、誰でも統一された同じフォント、デザイナーの指定したフォントでサイトを見ることができるようになりました。
Webフォントの登場はWebデザインのレベルをぐっと引き上げました！
- どのデバイス・端末からでも見た目を統一できるので、サイトのクオリティが格段にアップ
- いろいろな種類のフォントを使えるようになった
- デザイン性のためにテキストを画像化する必要がなくなった
- SEOに最適
- レスポンシブデザインとも相性がいい
Webフォントのデメリット
Webフォントは便利ですが、指定しすぎると表示が重くなることがあります。
特に日本語は文字数が多いため、使いすぎに注意が必要です。
ただ、通信環境や技術は年々進化していますし、Google Fontsなどは必要な文字だけを読み込む技術（サブセット化）などが自動で行われているため、普通に使う分には過度に心配しなくて大丈夫です。
Webフォントの使い方・実装方法
Webフォントを使うためには、まずWebフォントのDLサイトから自分のパソコンにフォントをインストールします。
ただ、「パソコンに入れた＝Webサイトにも反映される」わけではありません。
実際には、
- デザイン作業用：PCにフォントをインストールする
- Web表示用：HTML/CSSでWebフォントとして読み込む設定をする（数行書き加えるだけです）
という 2段階の作業が必要になります。
以下は例ですが、HTMLとCSSにこんな風にコードを書くことで、Webフォントとして利用できます。
CSSには、こんな感じ。
body {
font-family: 'Noto Sans JP', sans-serif;
}デザイン作業で使う場合（PCにインストール）
使いたいWebフォントを自分のパソコンにインストールすることで、デザインソフト上でそのフォントを使ってデザインを作れます。
デザインカンプをもとにコーディングする場合、コーダー側の環境にも同じフォントが必要になるので、注意してください。
フォントが入っていないと、別のフォントで表示されてしまって、デザインを正しく共有できません。
Webサイトに表示する場合（HTML / CSSで指定）
Webサイトにフォントを反映させるには、HTMLコーディングの際に、HTMLとCSSにWebフォントを読み込む設定を書き加えます。
この設定によって、ブラウザがインターネット経由でフォントを読み込み、ユーザーの環境に関係なく、指定したフォントが表示されるようになります。
Webサイト制作以外にも使える？
インストールしたフォントは、Webサイト制作だけでなく、バナー制作・LPデザイン・資料作成・グラフィックデザインなどにも活用できます。
Word・PowerPointなどでも使用できるため、用途はWebに限られません。
おすすめWebフォントサービス（無料あり）
プロがよく使っているWebフォントサービスを３つ紹介します。
どれも、Webフォントとして指定できるのはもちろん、普通にダウンロードして紙デザインなどにも利用されています。
完全無料なものから、有料ライセンスのものもあるよ
有料フォントの場合、制作者側が契約していないとそのフォントは表示されずに、自分のPCに入っているデバイスフォントで表示されてしまいます。
Google Fonts
Googleが提供しているWebフォントサービスです。
すべて無料で利用でき、商用利用も可能なため、初心者からプロまで幅広く使われています。
Adobe Fonts
Adobeが提供しているWebフォントサービスです。商用OK、Web利用OK、ロゴの作成・商標登録OKです。
2万点以上のフォントが用意されており、日本語フォントも豊富なので、実務レベルで十分なラインナップです。
一部のフォントは、無料アカウントでも利用可能。
ただ、すべてのフォントを制限なく使いたい場合は、Creative Cloudプラン（Adobeソフトの契約）が必要になります。
Adobe Fontsの大きな特徴は、PhotoshopやIllustratorなどのAdobe製品と連動している点です。
デザインソフト内から直接フォントを探して使えるのが便利
Morisawa Fonts
モリサワが提供しているWebフォント配信サービスです。
モリサワフォントは、日本語フォントの中で最も有名で、日本のデザイン制作物では多くのモリサワのフォントが使われています。高品質で、特にプロのグラフィックデザイナーなら必須と言われるフォントです。
利用は有料ライセンス（サブスク）で、月額・年額のプランがあります。
はじめて使うのであれば、まずはgoogle Fontsがおすすめです。完全無料なので安心して使えますよ。
【実装例】Google Fontsを実装させてみよう
Google Fontsを例に、実際にWebフォントを使う方法を紹介します。実装には、HTML/CSSの基礎知識が必要です。
まずはGoogle Fontsのサイトを開きます。
[Filters]のボタンをクリック。
日本語フォントを使いたい時は、言語を「Japanese」に変更すると、右側に日本語フォントのリストが出てきます。
リストの中から好きなフォントを選んでクリックします。
選んだフォントの詳細が出てきます。スクロールすると、太さ（Weight）の一覧などが表示されます。
このフォントを欲しい場合は、画面右上の[Get font]をクリック。
HTMLやCSSに挿入したいコードを取得したい場合は、上のボタンをクリック。
フォントデータをインストールしてデザイン作業に使いたい場合は、下のボタンをクリック。
ここでは、下のボタンをクリックして進みます。
フォントデータがダウンロードされるので、.ttfという拡張子のファイルをクリックして、その中に「インストール」というボタンがあるのでクリック。
これでパソコンにそのフォントがインストールされます。
HTML/CSSに書き加える場合
上の「Get embend Code」をクリックすると、コピペ用のコードが表示されます。
htmlと書かれた上の方のコードを、HTMLファイルのヘッダーにコピペします。
上記は、テキストエディタで開いたHTMLです。
<header></header>タグ内に、コピーしたコードを貼り付けます。
CSSは以下のように書きます。これはコピペではなく、セレクタ部分を聞かせたい部分に修正します。
全体に効かせたかったら、bodyに以下のように書けばOK。
body {
font-family: 'Noto Sans JP', sans-serif;
}まとめ
Webフォントは、Webサイトの見た目や読みやすさを大きく左右する重要な要素です。
仕組みと使い方を押さえれば、難しいものではありません。
まずは定番のWebフォントを使いながら、少しずつフォント選びや設定に慣れていきましょう。
フォントを意識するだけで、Webデザインのクオリティは確実に変わってきますよ。