こんにちは、フリーランスエンジニアのしょーご(@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の実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります！
基本的にまとめて購入していただくとかなりお得になります。
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！
＼課題の購入はこちらから／
＼課題の詳細はこちらから／
