あなたのサイトはmacとWindowsで同じフォントが出力されていますか？
Webサイトの雰囲気はフォントで大きく変わります。
環境によって意図せず雰囲気（フォント）が変わってしまっているのであれば、いいサイトとは言えません。
この記事は、どの環境でも同じフォントを出力できる「Webフォント」について簡単に説明していきます。
目次
Webフォントについて学ぼう
まずは、Webフォントの概要について説明していきます。
Webフォントとは
Webフォントとは、Webサイトを制作する際に、インターネット上からフォントを読み込む技術のことです。
従来のフォントの指定の方法は、Webサイトを閲覧するパソコンに搭載されているフォントを呼び出すことが一般的でした。（デバイスフォント）
ただし、このフォントの指定方法では、Webサイトで指定されているフォントがパソコンに搭載されていなかった場合に、別のフォントで代用されてしまいます。
この問題を解決する手段として、Webフォントがあります。
Webフォントを用いることで、Webサイトを閲覧する全てのパソコンにインターネット経由で同じフォントを読み込ませることができます。
なので、フォントが変わることにより、Webサイトのデザインの雰囲気が崩れることを回避することができるようになるのです。
有名な無料のWebフォント
ここまでで、Webフォントとは何かについて説明してきました。
次は、実際にWebフォントを提供してくれているサービスについて学んでいきましょう。
Adobe Fonts
Adobe Fontsは、Adobe社が提供するフォントを非商用/商用利用に関わらず使用できるWebフォントサービスです。
Adobe Creative Cloud を有償プランで契約していると無制限で利用できます。
無償プランの場合だと、使用できるフォントに一部制限がかかります。
日本語用のフォントも数多く提供されているため、Webフォントに困ったら一旦はこのAdobe Fontsを探してみると良いです。
Google Fonts
Google Fontsは、Google社が提供するフォントを非商用/商用利用に関わらず使用できるWebフォントサービスです。
近年では、日本語用のフォントが導入され、日本での利用も増えているWebフォントサービスの一つです。
ZeroPlusの授業でも、このGoogle Fontsを利用してフォントの読み込みを行います。
Google fontsを使ってみよう
ここからは授業で扱うため、Webフォントサービスの中でも、Google Fontsについての使い方を説明していきます。
Google Fontsの使い方
Google Fontsの公式サイトにアクセスする
まずは、Google Fontsの公式サイトにアクセスします。
今後多く利用するサービスになるので、ブックマークに登録しておくことをおすすめします。
「Search fonts」からフォントを検索する
次に、検索欄からフォントを検索します。
今回は「Noto Sans Japanese」を例にして検索していきます。
「Select This Style」をクリックする
使用したいフォントの詳細を開いてスクロールします。
読み込みたいスタイルを見つけたら「Select This Style」をクリックします。
今回は「Regular 400」を選択します。
読み込みたいフォントは複数指定が可能です。（読み込みすぎないように注意）
「Selected family」をクリックする
読み込みたいフォントの指定が終わったら、画面右上の「Selected family」をクリックします。
フォントの読み込みに必要なコードが生成されるので、確認しましょう。
複数のフォントをまとめて読み込める
今回は例として「Noto Sans Japanese」１つだけを読み込んでいますが、
コードを生成する前に複数のフォントを指定していると、まとめて複数のフォントの読み込みを行ってくれるコードを生成することもできます。
画像は、「roboto」という英語フォントも一緒に読み込んだものです。
「headタグ」の中に「生成されたlinkタグ」をコピペする
「Noto Sans Japanese」を読み込むためのlinkタグが生成されるので、このコードをHTMLファイルのheadタグの中にコピペします。
「cssファイル」に「生成されたfont-family」をコピペする
また、「Noto Sans Japanese」を読み込むためのfont-familyのコードが生成されるので、このコードをcssファイルにコピペします。
以上でGoogle Fontsを使ったWebフォントの読み込みは完了です。
Webフォントを使ってみよう
今回は、Webフォントの中でも、ZeroPlusの授業でも使うGoogle Fontsに焦点を当てて説明をしました。
記事を読むだけでなく、実際に自分でも操作しながらGoogle Fontsの使い方に慣れていきましょう。
