あなたのサイトは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の使い方に慣れていきましょう。
一つ、確かな理解を積み上げましたね。
ただ「理解した」と「実務で使える」の間には、もう一段ギャップがあります。なんとなく作れても、実務基準ではコードにムダや間違いがあるとみなされることがあります。自分では気づけない、そのズレをどう埋めるかが次の課題です。
そのギャップを埋める一番早い方法は、実際の案件レベルの制作を、メンターに見てもらいながら進めることです。
ZeroPlus Gateでは、30日間無料で、正しくWebサイトを作る力が身につく実践型の学習環境を提供しています。
- メンターとあなただけの学習ロードマップを作れる
- 現場経験豊富なプロへ回数無制限で質問ができる
- 元ランサーズの技術責任者監修のカリキュラム
このレベルの環境を、入会金も月謝も一切なしで提供しているのはZeroPlus Gateだけです。ただし、参加者の数には制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
登録は30秒、今すぐ次の一歩へ
