Noto Sans JPの使い方｜ゲームの見出しだけに日本語フォントを使う

今回の仕上がり

下の自作例で「標準書体へ切り替える」を押すと、見出しの指定だけを変えられます。標準書体は端末によって異なるため、差の大きさをすべての環境へ当てはめません。

例を別画面で開く · フォントとライセンス付きの使用例ZIP

公式で書体と太さを確かめる

公式ページでNoto Sans Japaneseを開き、見本に表示する文章と太さを確認します。配布元の一覧にはフォント本体とOFL.txtがあります。ブラウザーで表示するだけでなく、フォントを配布物へ同梱する場合は、この利用条件も一緒に保存します。

今回の28,568バイトのTTFはGoogle Fontsの文字限定配信で取得しました。日本語すべてを収録した通常配布版ではありません。「星あつめ」を含む指定文字用のファイルで、編集部がフォントを加工したものではありません。他の文章へ使うときは公式から必要な文字を含む版を入手してください。

font-faceと見出しの指定を分ける

@font-face {
  font-family: TutorialNoto;
  src: url('noto-title.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
h1 { font-family: TutorialNoto, system-ui, sans-serif; }

TTFとCSSを同じフォルダーへ置きます。font-faceで読み込む名前を決め、h1だけへ指定しています。読み込み待ちや収録外の文字に備えて、後ろに標準書体も置きます。文字を横へ引き伸ばして太さの代わりにすることはせず、配布されている700を使います。

ZIPを別フォルダーへ展開し、example.htmlを開いても確認できます。今回はフォントの読み込みと切り替えをPCで確認しました。全文収録版、すべての漢字、全ブラウザー、スマホ実機の表示は未検証です。

フォントの条件は、作ったゲームと分けて残す

同梱ファイルはSIL Open Font License 1.1です。著作権表記はCopyright 2014–2021 Adobe、予約名はSourceです。フォント単体の販売は認められず、再配布では著作権とライセンスを保持します。改変版には予約名の条件もあります。詳しくは全文を確認してください。

この使用例の自作HTMLはCC0ですが、フォントまでCC0になるわけではありません。OFLは、フォントで作った文書へ同じライセンスを強制しないと説明しています。ゲームの画像やコードの権利も別々に記録します。実際の配置先は開発講座07の星あつめです。確認日は2026年10月12日。