Google Fontsを使ってみよう

web上で公開されている欧文フォントを読み込んでHPで表示させる事ができます。

Google Fontsサイトにアクセスします

http://www.google.com/fonts/

希望の書体を絞り込みます

ページ右側のフォントの種類の選択パーツ全てにチェックが入っているので、１つずつチェックを入れて好みの書体を絞り込んだ方が使いやすいと思います。もちろん全部チェックが入ったままで探してもらっても構いません。

フォントが決まったらプラスボタンをクリック

ウィンドウ下部にバーが出るのでクリック

@IMPORTのリンクテキストをクリックして、フォントの読み込みスタイルを１行コピー。

※このウィンドウはまだ閉じないで下さい。

お手元のテンプレートのcssフォルダ内のstyle.css冒頭に貼り付ける

先ほどのGoogle Fontsウィンドウに戻ってフォント指定のタグをコピー。

再びstyle.cssに戻ってGoogle Fontsを使いたい部分に貼り付け。

ブラウザでプレビュー

選んだフォントがきちんと表示されていれば成功です。
尚、Googleサイトから直接フォントを読み込んでいる為、ネットから切断されていると表示されません。回線速度が重たいと表示に時間がかかる場合があります。

フォントの削除

きになるフォントをどんどん保存していくと何が何だかわからなくなるので、使わないフォントはマイナスをクリックしてリストから削除しましょう。