Web制作実務役立ち

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

Google FontsのNoto Sans JPの使い方【反映されないを解決します】
本ページにはプロモーションが含まれています。

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

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

まさひろくん

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

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

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

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

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

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

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

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

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

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

コーディング課題 超実践編

超実践編をとりあえず見てみる

2024年 Google Fontsの可変フォントについて

2024年からGoogle Fontsでは可変フォント (Variable fonts) に対応したようです。

可変フォント (Variable fonts) は幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の @font-face 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

つまり、様々なフォントスタイルを1つのファイルにまとめられて、しかし重くはない。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">

こういう感じで、一気に複数の太さを読み込めます。時代は変わりました。

また、これを機にGoogle FontsのUIが大きく変わりましたが、そこに対応している記事は少ないので、価値が高いと思います。

【Web制作39日目】 ✑初級DAY26-27 完了(2h) 動画視聴しながらサクッと進みました〜!! Google fontの件はDiscordの 解答を見て解決🌈 しょーごさん( @samuraibrass )のブログを 参考にさせていただきました😌🙏 #デイトラ #Web制作 #今日の積み上げ
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@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へアクセス

まずはhttps://fonts.google.com/にアクセスします。

②使用したいフォント名を検索

今回はNoto Sans JPを使用したいので、Noto Sans JPと検索します(ご自身が利用したいフォントを検索してください)

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

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

③コードを取得する

右上の「Get Font」をクリック。

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

その後、「Get embed code」をクリック。

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

embedは「埋め込む」という意味。今回はHTMLのheadにコードを埋め込むのでembed codeを選択。

サーバーにファイルを入れて読み込む場合はダウンロードを選択します。

左側のWeightがFull axisになっているのを確認。

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

One valueだと1つの太さしか選択できません。可変フォントか、1つの太さか、どちらかしか選べません。

デザインデータを見て、太さが複数ある場合は、Full axisで良いかと思います。特段重くなるわけではないようなので。

詳しく知りたい人はMDNを読んでください。

可変フォントに対応していない場合は、従来のように1つ1つ太さを選択していく形式なようです。

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

きちんと自分が使う分の太さが選択されているか、ご確認下さい。

④コードをコピペする

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

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

しょーご

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

Google Fontsの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@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 Thin

原因は不明ですが、おそらくNoto Sans JPを複数読み込んでいる時に起こっており、読み込みを外したら直ったので、フォントの読み込み方に問題がある可能性が高いです。

正しく読み込めていれば、検証のComputedRendered Fontsが以下の表示になるはずなので。

宣伝:あなたのコーディングをレビューします

しょーごログでは「レビュー付きコーディング課題」を出しています。

やりっぱなしじゃなく、最後にはプロからのレビューが受けられるコーディング課題になっていて、ポートフォリオとしても十分通用するレベルになっています。

是非御覧ください👇

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

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

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

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

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

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

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

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

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

応援して頂ける方へ

ご寄付を頂けると今後の更新の励みになります!

🍺 ビールをプレゼントする

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