Google Fontsの使い方(2021.03更新)

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

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

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

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

ページ左上の「Categories」をクリックするとフォントの種類を絞り込めます。
1つずつチェックを入れて好みの書体を見つけて絞り込んだ方が使いやすいと思います。
もちろん全部チェックが入ったままで探してもらっても構いません。


「Language」を「Japanese」にすれば日本語対応フォントを見る事ができます。

フォントが決まったらクリックして詳細ページを開きます。

フォントの右側に「+Select this style」とあるのでそれをクリック。

ウィンドウ右側にパネルが出てきます。

※もしパネルが出てこない場合、ブラウザを再読み込みしてみて下さい。Mac版Chromeだと結構この現象が出ました。

「@import」をチェック

②の赤枠部分をコピーし、お手元のcssフォルダに貼り付けます。場所は、とりあえず冒頭の「@charset "utf-8";」の下あたりでOKです。
③は、フォントを適用したいスタイル名のブロックに貼り付けて下さい。

ブラウザでプレビュー

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