GoogleFontsの日本語フォントが増えている

GoogleFontsの日本語フォントが増えている

このサイトでは記事のタイトルなどに Noto Serif のボールドを使っていますのでサブセット版を作ろうと思い、久しぶりに Google Fonts へ行きましたら、日本語フォントも随分増えています。

01Google Fonts の日本語フォント

Google Fonts に行き、Language に Japanese を選択すれば日本語フォントの一覧が表示されます。

2021/3/1現在登録されている日本語フォントは以下の通りです。画像です。

タイトルなどに使えそうなデザインフォントがチラホラと出始めています。

02Google Fonts の使い方

  1. 一覧から希望のフォントをクリックします
    style が複数のものはウェイトの異なったフォントをもっています
    400 がレギュラー、700 がボールドです

  2. Select this style をクリックして選択します
    右から設定タブが出てきます

  3. 表示されている埋め込みコードをコピーしておきます
    <link> の場合は <head></head> 内に
    @import の場合は <style>~</style> のまま <head></head> 内に、または @import 以下を css ファイル内に書きます

  4. そのフォントを使いたいセレクタに font-family: Noto Sans JP などとフォント名を指定します

03サブセット版を作る

Noto Sans JP の場合、レギュラーだけでも 16MB の容量があります。かなりの容量ですが、実際にはファイルを分割して読み込んだり、display=swap オプションによりダウンロードするまではデバイスフォントで表示しておくという最適化が施されていますので表示が遅いと感じることはないと思います。

しかし、それだけのファイルをダウンロードしていることに変わりはありませんので、容量を小さくできればそれに越したことはありません。

必要な文字だけのフォントファイルを作るサブセット化という方法があります。

方法はこちらの記事に書いています。

www.imuza.com

04Noto Serif 700 をサブセット化

上のリンク記事の方法を使い、Noto Serif 700 をこのサイトの過去記事で使用している文字と常用漢字でサブセット化してみました。

600KB になりました。

また、トップページに表示しているスティーブ・ジョブズの言葉は Kosugi Maru を使っています。使用文字が少ないタイトルだけなどの場合は、たとえば

<link href='https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap&"ベストを尽くして失敗したら、ベストを尽くしたってことさスティーブ・ジョブズ"' rel="stylesheet">

とすれば使用文字だけ読み込みます。

Google Fonts・和文・多言語 フリーフォント最強Selections (デジタル素材BOOK)

Google Fonts・和文・多言語 フリーフォント最強Selections (デジタル素材BOOK)

  • 発売日: 2019/03/15
  • メディア: 単行本(ソフトカバー)