Noto Sans Japaneseを使う
Noto Sansとは
Notoフォントは GoogleとAdobeが共同開発した全ての言語に対応することを目指す野心的なフォントです。その中でNoto Sans Japaneseは日本語部分を取り出したものです。書体が美しく見やすいので導入して見ました。
改めてNoto フォントについてのGoogleのアナウンスを見てみると、その名の由来を初めて知りました。
When text is rendered by a computer, sometimes characters are displayed as “tofu”. They are little boxes to indicate your device doesn’t have a font to display the text.
Google has been developing a font family called Noto, which aims to support all languages with a harmonious look and feel. Noto is Google’s answer to tofu. The name noto is to convey the idea that Google’s goal is to see “no more tofu”.
あの文字フォントがないときに表示される□（豆腐）に由来しているとは。
Noto Sans Japaneseは、 Google Fonts + 日本語 早期アクセスで公開されています。Noto Sans以外にも、美しい日本語フォントが公開されています。ただし、「早期アクセス」の名の通り、フォントによってはまだ開発中のため漢字の収録フォントが少なかったりするので、説明を確認して使ってください。
Noto Sans Japaneseは以下のように紹介されています。
Noto helps to make the web more beautiful across platforms for all languages. Currently, Noto covers over 30 scripts, and will cover all of Unicode in the future. This is the Sans Japanese family. It has Regular and Bold styles and is hinted.
Noto Sans Japanese の 使い方
Noto Sans Japaneseを自分のWebサイトで使うには、以下の二つが必要です。
- Noto Sans Japaneseのスタイルシートの読み込み
- 自分のサイトのスタイルにFontの指定をする
「Font−familyのベストな書き方 2017年版」を参考に、以下のように組み込んで見ました。
まずヘッダーへの指定です。
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
次にスタイルシートでのフォントの指定です。
body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif; }
Noto Sans Japanese 導入のデメリット
Noto Sans Japaneseに限ったことではありませんが、Webフォントを使う場合ファイルサイズが問題です。
英語フォントでは問題になりませんが、日本語の場合漢字が多いのでどうしてもファイルサイズが大きくなってしまいます。結果、読み込みに時間がかかり、サイトが表示されるまでしばらく待たされると言うことも発生します。
実際に指定して見たところ、極端にサイト表示がもたついたりと言う状況でもないので当面このまま運用したいと思います。
様子を見て、Noto Sans Japaneseのサブセット化を行うか、游ゴシックに指定を変えるかもしれません。