「Note Sans JP」はAdobeとGoogleが共同開発したゴシックフォントで、オープンソースで無料で使用できます。読みやすさに優れたフォントで、WEBフォントの定番として様々なWEBサイトで使用されています。
フォントファイルが配置できるサーバが準備できる場合、配布しているサイトからフォントファイルをダウンロードすることが可能です。
[配布サイト]
(ページ右上の[Get font]をクリックした後に、次の画面で[Download all]をクリックして入手して下さい)
GoogleからCDN(linkタグにURLを指定するだけでフォントが利用できるURL)が公開されているので、今回はそれを利用して組み込みます。
・htmlのlinkタグとして指定する場合headタグ内に以下を記述します
・スタイルシート内から読み込む場合は以下を記述します
CDNのアドレスに含まれている「display=swap」は、CDNの読み込みが遅れる場合、自動的に他の代替フォントで表示されるようにするためのオプションです。CDNの読み込みが遅れた場合、プラットフォームに存在する他のフォントでまず先に表示させ、その後、CDNの読み込みが終わった段階で改めてNote Sans JPでの表示が適用されます。
フォントファイルはサイズが大きいため、ネットワーク環境によっては読み込みに時間が掛かる場合もあります。その際に、先に代替フォントで表示させ、文字が表示されないタイムラグを少しでも防ぐことができます。
使用できるfont-weightは以下の9種類になります。
ネットワーク環境によって、フォントファイルのあるCDNの読み込みに時間が掛かる場合があります。少しでも読み込みを軽くするために、読み込むフォントの太さ(font-weight)を選択することができます。
CDNのアドレスに含まれている「:wght@100..900」部分ですが、この状態の場合、9種類の太さすべてが選択された状態です。必要なフォントの太さだけを選択設定すると、読み込みの軽量化が可能です。
「:wght@」の後の部分に必要なfont-weightを「;」区切りで指定します。例えば400と600のみが必要な場合「:wght@400;600」と指定します。
例)font-weight:400;とfont-weight:600のみが必要な場合のCDN
https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600&display=swap
まず、両フォントの説明は以下になります。
・Noto Sans JP
「JP」は日本語（Japanese）を示しています。
日本語のみをサポートしており、他の言語や文字セットは含まれていません。
主に日本語のテキストを表示するために使用されます。
・Noto Sans CJK JP
「CJK JP」は、中・日・韓（Chinese, Japanese, Korean）に対応していることを示しています。
このフォントは、日本語（JP）だけでなく、中国語（Chinese）、韓国語（Korean）もサポートしています。
「CJK JP」の部分に注目すると、中国語（CJK）と日本語（JP）をサポートすることを意味しています。
要するに、「Noto Sans JP」は日本語のみをサポートしていますが、「Noto Sans CJK JP」は中国語、日本語、韓国語の全てをサポートしています。使用する際には、対象となる言語や文字セットに応じて適切なフォントを選択する必要があります。
Google Fontsには「Noto Sans CJK JP」は無く、あるのは「Noto Sans JP」。一方、Adobe Fontsには「Noto Sans JP」は無く、あるのは「Noto Sans CJK JP」になっています。
WEBサイトのデザインはillustratorで行って、そこからhtmlコーディングを行う制作場面も多いと思います。
その場合、illstratorのフォント指定では「Noto Sans CJK JP」、htmlのスタイルシートでは「Noto Sans JP」を指定する形になります。