Google Fontsの使い方は2024年より画面デザインに変更があり、多くのユーザーが初見だと使い方に難儀しています。そこで今回は「Google Fontsの使い方」をNoto Sans JPを例に解説していきます。
Noto Sans JPなるものがデザインデータで指定されていたけど、うまく使えない…というかGoogle Fontsってどうやって使うの？
Google Fontsから読み込んでいるつもりなんですが、上手く反映されてなくて困っています。正しいNoto Sans JPの使い方を教えてほしい。
そんなあなたをお助けします。本記事はデイトラWeb制作コースの方が特によく読んでくださるようなので、ぜひ周りにもおすすめいただけると嬉しく思います。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
2024年 Google Fontsの可変フォントについて
2024年からGoogle Fontsでは可変フォント (Variable fonts) に対応したようです。
可変フォント (Variable fonts) は幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の @font-face 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。
引用：可変フォントガイド
つまり、様々なフォントスタイルを１つのファイルにまとめられて、しかし重くはない。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">こういう感じで、一気に複数の太さを読み込めます。時代は変わりました。
また、これを機にGoogle FontsのUIが大きく変わりましたが、そこに対応している記事は少ないので、価値が高いと思います。
今回は可変フォントを使用していきます。
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@100..900&display=swap" rel="stylesheet">❷CSSで読み込む
CSSの@importで読み込む方法です。
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap')
個人的にはCSSではなく、HTMLのheadで読み込む派です。
Noto Sans JPの使い方
「❶HTMLのheadで読み込む方法」で解説していきます。
- Google Fontsへアクセス
- 使用したいフォント名を検索
- コードを取得する
- コードをコピペする
①Google Fontsへアクセス
まずはhttps://fonts.google.com/にアクセスします。
②使用したいフォント名を検索
今回はNoto Sans JPを使用したいので、Noto Sans JPと検索します（ご自身が利用したいフォントを検索してください）
すると、下に自動でNoto Sans Japaneseが出てくるので、クリックします。
③コードを取得する
右上の「Get Font」をクリック。
その後、「Get embed code」をクリック。
embedは「埋め込む」という意味。今回はHTMLのheadにコードを埋め込むのでembed codeを選択。
サーバーにファイルを入れて読み込む場合はダウンロードを選択します。
可変フォントに対応している場合は、左側のWeightがFull axisになっているので、このまま使用して大丈夫です。
逆にOne valueだと１つの太さしか選択できません。可変フォントか、１つの太さか、どちらかしか選べません。
デザインデータを見て、太さが複数ある場合は、Full axisで良いかと思います。特段重くなるわけではないようなので。
詳しく知りたい人はMDNを読んでください。
可変フォントに対応していない場合は、従来のように１つ１つ太さを選択していく形式なようです。
きちんと自分が使う分の太さが選択されているか、ご確認下さい。
必ず任意の太さを選択しているか確認してください！
font-weight boldにして太字になっていない人が多いのは、これが理由です！！
④コードをコピペする
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@100..900&display=swap" rel="stylesheet">font-family: 'Noto Sans JP', sans-serif;Google Fontsが当たっているかの確認方法
成功していれば、検証ツールのComputedの「Rendered Fonts」で当たっているフォント名がNoto Sans JPになっているはず。
Web制作をするなら、Rendered Fontsを確認する癖をつけておくこと！！
ここの確認方法を以下の記事で以前解説しているので、どうぞ。
補足：Noto Sans JP Thinとは？なぜなるの？
通常のNoto Sans JPを指定しているつもりなのに、何故か細いNoto Sans JP Thinになっていることがあります。
原因は不明ですが、おそらくNoto Sans JPを複数読み込んでいる時に起こっており、読み込みを外したら直ったので、フォントの読み込み方に問題がある可能性が高いです。
また、Noto Sans CJK JPを使用している場合も起こるようです。読み込まれているのがNoto Sans Japaneseかご確認下さいませ。
正しく読み込めていれば、検証のComputedのRendered Fontsが以下の表示になるはずなので。
このあたりは現在調査中で、Noto Sans JP Thinになる人と、ならない人に分かれるようです。
宣伝：あなたのコーディングをレビューします
しょーごログでは「レビュー付きコーディング課題」を出しています。
やりっぱなしじゃなく、最後にはプロからのレビューが受けられるコーディング課題になっていて、ポートフォリオとしても十分通用するレベルになっています。デイトラなどのプログラミングスクールと併用される方も多いですし、Web制作を独学している方にも有用なものとなっています。
Web制作学習ロードマップと合わせて、是非御覧ください👇
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
