今さら聞けないNoto Sans JPなどのGoogle Fontsの使い方

Google Fontsとは

Google FontsはWebフォントとして無料で提供されているサービス。

2010年に発表されてから多くのWebサイトで使用されている。

https://fonts.google.com/

Noto Sans JPとは

GoogleとAdobeが共同開発したフォント。

Google Fontsで一番人気のフォントで最近話題になったデジタル庁のWebサイトでも使用されている。

Noto Sans JPとは別にNoto Serif JPのフォントもあるので、パソコンには両方インストールしておくと良いだろう。

https://fonts.google.com/specimen/Noto+Sans+JP

https://fonts.google.com/specimen/Noto+Serif+JP

フォントのインストール方法

Google Fontsの各種フォントのページ右上の「Download family」のボタンを押してzipファイルをダウンロードする。

Download familyのボタンはブラウザのウィンドウ幅が狭いと表示されないので注意。

今さら聞けないNoto Sans JPなどのGoogle Fontsの使い方

zipファイルを解凍するとフォントファイルが入っている。

Windowsの場合はコントロールパネルの「デスクトップのカスタマイズ」から「フォント」を開いてフォントファイルをドラッグ&ドロップでインストールできる。

Macの場合はアプリケーションにある「Font Book.app」を開いてフォントファイルをドラッグ&ドロップでインストールできる。

Font Book.app
Font Book.app

WebサイトでWebフォントを使用する方法

フォントのページの各フォントの右に「+ Select this style」を押してWebサイトで使用するフォントを選択する。

Webサイトで使用する場合はBoldのフォントもあれば必ず選択する。

Boldのフォントがないとfont-weight: bold;で太字にできないので注意。

選択したらページ右上の赤い丸が付いているアイコンをクリックする。

Webサイトで使用するWebフォントを選択
Webサイトで使用するWebフォントを選択

赤い丸が付いているアイコンをクリックするとHTMLとCSSのコードが表示されるので、これをコピーして貼り付ければWebサイトでWebフォントを使用できるようになる。

コードをコピーして使用するWebサイトのHTMLに貼り付ける
コードをコピーして使用するWebサイトのHTMLに貼り付ける
<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;700&display=swap" rel="stylesheet">
<style>
body {
  font-family: 'Noto Sans JP', sans-serif;
}
</style>

Webフォント(Noto Sans JP)を使用したサンプル

使用不可の文字があることがある

Google Fontsの日本語フォントの中には使用不可の文字があることがあるので注意。

使用する際は選択したフォントがWebサイトで文字化けしないか事前に確認したほうが良いだろう。

日本語フォントでも使用不可の文字があることがある
日本語フォントでも使用不可の文字があることがある