こんにちは、フリーランスエンジニアのしょーご(@samuraibrass)です。
今回は「Google Fontsの使い方」をNoto Sans JPを例に解説していきます。
Noto Sans JPなるものがデザインデータで指定されていたけど、うまく使えない…というかGoogle Fontsってどうやって使うの?
そんなあなたをお助けします。
\現役エンジニアのレビュー付き/
実践レベルのコーディング課題公開中

- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
コーディングを学習中の方はぜひご活用ください。
\無料の入門編から本格企業サイトまで/
Google Fonts(Noto Sans JP)を使う方法は二種類ある
❶HTMLのheadに読み込む(推奨)
HTMLのhead内でlinkタグで読み込むのが一般的です。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
❷CSSで読み込む
CSSの@importで読み込む方法です。
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
個人的にはCSSではなく、HTMLのheadで読み込む派です。
Noto Sans JPの使い方
「❶HTMLのheadで読み込む方法」で解説していきます。
①Google Fontsへアクセス

まずはhttps://fonts.google.com/にアクセスします。
②Noto Sans JPと検索
Noto Sans JPと検索してください。

すると、下に自動でNoto Sans Japaneseが出てくるので、クリックします。
③使用する太さを選択する
デザインデータで使われているfont-weightのものを全て選択してください。
多くのデザインではweigth400、500、700あたりを使用しているので、ここでは読み込んでいます。

めちゃくちゃ多い間違いなんですが、ここでちゃんと任意の太さのデータを選ばないと、実装時にCSSのfont-weightで指定しても、デザイン通りの太さになりません。
デザインで使われているfont-weightをよく確認すること!!
あと、読み込むweight数を増やすと、それだけ読み込む容量が増えてサイトが重くなるので、必要なものだけ確認して選択してくださいね。
デザインデータ(XD)の値の読み取り方はこちらで解説しています。
④コードを発行する
画面右側にこのようなタブが出現したかと思うので、ここのコードをコピペしていきます。

⑤コードをコピペする
linkタグはそのままHTMLのhead部分にコピペしてください。
font-familyはCSSファイルに書いてください。
font-familyはbodyタグに当てることが多いですね。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
font-family: 'Noto Sans JP', sans-serif;
Google Fontsが当たっているかの確認方法
成功していれば、検証ツールのComputedで当たっているフォント名がNoto Sans JPになっているはず。

ここの確認方法が以下の記事で以前解説しているので、どうぞ。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題をnoteで公開しています。

- デザインカンプからのコーディング
- プロによる2回の表示確認特典
- ポートフォリオとして使用OK
初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!
基本的にまとめて購入していただくとかなりお得になります。
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!
\課題の購入はこちらから/
\課題の詳細はこちらから/