あなたのサイトはmacとWindowsで同じフォントが出力されていますか？
Webサイトの雰囲気はフォントで大きく変わります。
しかし、環境によってフォントが正しく表示されないと、意図せずにWebサイトの雰囲気が変わってしまいます。
この記事は、どの環境でも同じフォントを出力できる「Webフォント」について簡単に説明していきます。
- Webフォントとはなにか
- 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」を選択します。
ここで選択したのは「Noto Sans Japanese」というフォントの「Regular 400」という太さのみとなります。
「Regular 400」はCSSでfont-weight: 400;（基準の太さ）を指定します。
また、フォントの中でも他の太さを指定したいときは、該当する太さを選択する必要があります。
たとえば、「Medium 500」を使いたいときは同様に「Select This Style」をクリックし、CSSにてfont-weight: 500;と指定することで使用できます。
よくある間違いとしてfont-weight: regular;やfont-weight: medium;と指定するものがありますが、そのようなキーワードは存在しないのでうまくいきません。右側の数字で指定しましょう。（詳しくはこちら）
読み込みたいフォントは複数指定が可能です。（不必要に読み込みすぎないように注意）
「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フォントの説明をしました。
- Webフォントとはなにか
- Webフォントの導入の仕方
- Webフォントを使用したフォント指定の仕方
といった内容を確認しました。Webフォントの中でも、ZeroPlusの授業でも使うGoogle Fontsの使い方に焦点を当てて説明をしました。
記事を読み終わった後は、実際に自分でも操作しながらGoogle Fontsの使い方に慣れていきましょう。
