WEB制作に欠かせないWEBフォント。
WEBフォントってそもそもなんなの？無料で使えるWEBフォントが知りたい！の声にお答えして今回はGoogle Fontsの使い方を説明します。
WEBフォントって何？
そもそもフォントとは書体やデザインを統一した文字群。
デザイン系のソフト以外にも、WordやExcelでフォント変更は馴染みのある機能だと思います。
ですが、フォントというのはそのPCに入っている種類しか基本的には表示できません。
例えば自分のPCへかわいい手書き風のフォントをダウンロードして、Wordでメニュー表を作ったとします。
そのデータを同じフォントがダウンロードされていない別のPCで開くと、かわいい手書き風文字が一般的なゴシックや明朝体に置き換わります。
せっかくフォントを選んだのになんだかガッカリですよね。
そしてこの現象はWEBサイトでも起こるんです。
すっきりと知的なWEBページにしようと、細身のゴシック体を使用してデザインしたとします。
しかし実際に組んでみたところ、見るデバイスによって明朝体になったりゴシック体になったり…
これはそれぞれのデバイスごとに基本表示するフォントが違うために起こる現象です。
さらに前述のように同じフォントが入っていない環境で見ると別のフォントに置き換わってしまう現象ですね。
そしてWEBフォントとは、
サーバーからフォントを読み込み、読み込んだフォントをWEBサイトへ表示する仕組みとなります。
WEBフォントを使用することで、どのデバイスからみても同じフォントが表示されるという訳です。
無料でWEBフォントが使えるGoogle Fonts
Google Fontsは誰でも無料で利用できるWEBフォントサービス。
好みのフォントを選択して生成されたコードを、HTMLやCSSに貼り付けるだけで自分のWEBサイトに反映できます。
種類は少ないですが日本語フォントも用意されています。
Google Fontsの使い方
まずはGoogle Fontsにアクセス。
Google Fonts
早速フォントを探していきましょう。
フォントの探し方
左上にある「Categories」から書体やタイプを選択
・Serif 明朝体
・Sans Serif ゴシック体
・Display 装飾文字
・Handwriting 手書き風
・Monospace 等幅
右となりの「Language」で言語を選択
「Font properties」で太さや斜体を選択
・Number of styles スタイルの数（太字、斜体の数）
・Thickness 太さ（細←→太）
・Slant 傾き（無←→斜体強）
・Width 文字幅（狭←→広）
見出しのような太い文字、筆記体のように傾きのある文字など特徴を指定できます。
使うフォントのテイストが決まっている場合は以上のフィルターを使うと効率よく探せます。
フォントを選択する
気に入ったフォントを選択していきます。
気に入ったフォントのページで「＋Select this style」をクリック。
選んだフォントが右側に表示されます。
生成されたコードを貼り付けて完了
フォントが揃ったら右側のタブを「Embed」へ
①
HTMLへ貼り付ける場合は<link>
CSSへ貼り付ける場合は@inport
を選択すると、それぞれ必要なコードが表示されます
②
コードをコピーし、
HTMLの場合は<head>内へ
CSSの場合はCSSファイルのいずれか（特に場所の指定はありません）へペースト
③
最後にCSSでWEBフォントを表示させたい場所を指定します
赤枠の部分をコピーしCSSの該当箇所にペーストします。
ページ全体に反映させたい場合は
body { font-family: ‘フォント名’; }
特定の場所だけの場合 例えば
div { font-family: ‘フォント名’; }
上記のように{}内にコピーした内容がまるっと入るようにペーストしてくださいね。
