Google Fontsの使い方（2021.03更新）
web上で公開されている欧文フォントを読み込んでHPで表示させる事ができます。
Google Fontsサイトにアクセスします
希望の書体を絞り込みます
ページ左上の「Categories」をクリックするとフォントの種類を絞り込めます。
１つずつチェックを入れて好みの書体を見つけて絞り込んだ方が使いやすいと思います。
もちろん全部チェックが入ったままで探してもらっても構いません。
「Language」を「Japanese」にすれば日本語対応フォントを見る事ができます。
フォントが決まったらクリックして詳細ページを開きます。
フォントの右側に「+Select this style」とあるのでそれをクリック。
ウィンドウ右側にパネルが出てきます。
もしパネルが出てこない場合、画面右上にある以下のアイコンをクリックして下さい。
または画面の再読み込みでもパネルが出てくると思います。
「@import」を選択
@importを選択したら、②の赤枠部分をコピーし、お手元のcssフォルダに貼り付けます。場所は、とりあえず冒頭の「@charset "utf-8";」の下あたりでOKです。
③は、フォントを適用したいスタイル名のブロックに貼り付けて下さい。
ブラウザでプレビュー
選んだフォントがきちんと表示されていれば成功です。
尚、Googleサイトから直接フォントを読み込んでいる為、ネットから切断されていると表示されません。回線速度が重たいと表示に時間がかかる場合があります。
cssに書き込んだ後は
「Remove all」を押してリセットしておいて下さい。
そのままだと次に候補フォントを見つけた際にどんどん情報が積み重なっていってしまいます。
