Google FontsをCSSから利用する

1. Google Fontsのサイトでフォントを探す

2. URLを見てフォント名を調べる

https://fonts.google.com/noto/specimen/<フォント名>

3. フォントをダウンロードするためのURLを作る

https://fonts.googleapis.com/css2?family=<フォント名>

ダウンロードするフォントが複数ある際は、後ろに&family=<フォント名>を必要な分だけ繋げること

例)

4. HTMLかCSSのいずれかに以下のようなコードを書く

code:html

HTMLの場合は<head>内に書かなければならない

code:css

@import "<フォントのURL>";

CSSの場合はファイルの一番上（少なくともスタイリング文より上）に書かなければならない

5. CSSの任意のセレクタにfont-familyを設定する

例

code:css

body {

font-family: "Noto+Sans+JP", sans-serif;

font-weight: 400; /* フォントが対応している幅で設定する（任意） */

}

参考