2ステップで簡単導入【Google Fonts + 日本語 早期アクセス】

こんにちは、ウェブデザイナーの野尻です。
昨年秋に公開されたGoogle Fonts + 日本語 早期アクセスを利用する機会がありましたので、備忘録がわりに。

「Google Fonts + 日本語 早期アクセス」とは

Googleが提供しているいわゆるウェブフォントで、日本語に対応した9種類のフォントを無償で使える太っ腹なサービスです。

[参照]Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access
https://googlefonts.github.io/japanese/

使えるフォント

  • M+ 1p
  • Rounded M+ 1c
  • はんなり明朝
  • こころ明朝
  • さわらび明朝
  • さわらびゴシック
  • ニクキュウ
  • ニコモジ
  • Noto Sans Japanese
  • 中でもNoto Sans Japaneseは非常に多くの漢字にも対応しているうえに、文字の太さも7種類から選ぶことができます。
    これが結構便利で、特に細文字と太文字はブラウザ標準ではカバーできないレベルを適用できるので、デザインの幅も結構ひろがるように思います。
    読み込みの問題がなければ、もう基本フォントはこれでいいんじゃないかというくらい、非常に重宝しそうです。

    たったの2ステップで導入可能

    導入の方法は簡単で、下記の2ステップで手軽に適用することができます。

    Noto Sans Japaneseの例

    ステップ1:<HTML> head 内にリンクを追加
    
    
    
    
    
    ステップ2:<CSS>でフォントを指定
    
    
    
    
    body {
        font-family: "Noto Sans Japanese", san-serif;
    }
    h1 {
        font-weight: 700; /* bold */
    }
    

    弱点としては、ウェブからフォントデータを読み込むため、表示に少し時間がかかることでしょうか。
    まだ試験的に提供されているサービスとはいえ、見出し部分やポイントで使うのであれば、十分実用化に耐えるレベルと思います。

    今後さらにフォントの選択肢が増えれば、デザインの幅も広がると思いますし、引き続きウェブフォントの世界をチェックしていきたいと思います。

  • Related Posts

    いま押さえておきたい!Webデザインのトレンド&定番10選【2025年版】
    • 5月 1, 2025

    Webサイトの第一印象はとても大事です。 どれだけ良いサービスを提供していても、「なんとなく古くさい」と感じられるデザインでは、少しもったいないです! 特に近年は、UI/UXのトレンドがすごいスピードで変化…

    続きを読む
    【異業種からの挑戦に注目】声優からWeb業界へ、地元長野でWebアシスタントとして奮闘する私の記録
    • 4月 25, 2025

    皆さん、はじめまして! この度、唐沢農機サービス/ビーズクリエイトに入社いたしました二宮と申します。 初めてのブログということで、少し長くなりますが、自己紹介と唐沢農機サービスに入社したきっかけについて、私…

    続きを読む