プログラミング

Google FontsのNoto Sans JPの使い方【反映されないを解決します】

Google FontsのNoto Sans JPの使い方【反映されないを解決します】

こんにちは、フリーランスエンジニアのしょーご(@samuraibrass)です。

今回は「Google Fontsの使い方」をNoto Sans JPを例に解説していきます。

まさひろくん

Noto Sans JPなるものがデザインデータで指定されていたけど、うまく使えない…というかGoogle Fontsってどうやって使うの?

ありさちゃん
ありさちゃん
Google Fontsから読み込んでいるつもりなんですが、上手く反映されてなくて困っています。

しょーご

そんなあなたをお助けします。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

【駆け出しコーダーに捧ぐ】2022年以降のポートフォリオ戦略&レビュー付きデザインカンプからのコーディング課題について解説
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

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 JP 使い方

すると、下に自動でNoto Sans Japaneseが出てくるので、クリックします。

③使用する太さを選択する

デザインデータで使われているfont-weightのものを全て選択してください。

多くのデザインではweigth400、500、700あたりを使用しているので、ここでは読み込んでいます。

Noto Sans JP 使い方
しょーご

めちゃくちゃ多い間違いなんですが、ここでちゃんと任意の太さのデータを選ばないと、実装時にCSSのfont-weightで指定しても、デザイン通りの太さになりません。

デザインで使われているfont-weightをよく確認すること!!

しょーご

あと、読み込むweight数を増やすと、それだけ読み込む容量が増えてサイトが重くなるので、必要なものだけ確認して選択してくださいね。

デザインデータ(XD)の値の読み取り方はこちらで解説しています。

④コードを発行する

画面右側にこのようなタブが出現したかと思うので、ここのコードをコピペしていきます。

Noto Sans JP 使い方

⑤コードをコピペする

linkタグはそのままHTMLのhead部分にコピペしてください。

font-familyはCSSファイルに書いてください。

しょーご

font-familyはbodyタグに当てることが多いですね。

Noto Sans JP 使い方
<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で公開しています。

コーディング練習課題
  1. デザインカンプからのコーディング
  2. プロによる2回の表示確認特典
  3. ポートフォリオとして使用OK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

基本的にまとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

\課題の詳細はこちらから/

あなたに是非読んでほしい記事です!