ずいぶん前に、Webフォントを導入してみた「Noto Sans Japanese」: Jkun Blog と云う記事を書いたが、「Windows 10 Fall Creators Update」を契機に再び「Noto Sans Japanese」を導入することにした。
グーグルが提供する「Noto Sans Japanese」。6934文字に削減したサブセット版。ウェイト (太さ) は7バリエーション。1ウェイトあたり約4.5MB。前回導入時は、7バリエーションすべてをロードしていたが、当ブログでは「レギュラー」「ボールド」の2バリエーションしか使用しておらず、無駄なロードがなされていた。
今回は、この点に注意して、スタイルシートを書き換えてみた。
/*
http://fonts.googleapis.com/earlyaccess/notosansjapanese.css
ここから、必要なウェイトのフォントセットだけ抽出して、ロード時間を短縮する。
「font-display: swap;」ロード完了までの代替フォント指定。
*/
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
font-display: swap;
}
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
font-display: swap;
}
/*
'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3' ----- Mac
'Noto Sans CJK JP' ----- Linux Ubuntu系ディストリビューション
'Noto Sans Japanese', Meiryo メイリオ ----- Windows
*/
body, input, textarea {
font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Noto Sans CJK JP', 'Noto Sans Japanese', Meiryo, メイリオ, sans-serif, serif;
}
pre, code, var, samp, kbd, .mono {
font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
}
↑ 「font-display: swap;」・・・ウェブフォントのロードが完了するまでは、代替フォントで表示することを指示する。Windows であれば「 font-family:」の優先順位から「Meiryo, メイリオ」が採用される。但し、この機能はブラウザに依存する。 (Chrome の場合 Ver.60 以降なら機能する。)
↓ Windows 10 Chrome 環境での実際の表示例。 クリックすれば原寸サイズで表示。ブラウザに依存することなく、どのブラウザでも同じ品質で表示される。

フォントのロード時間に関しては、気になる程ではないことを確認している。ただ、Googleのサーバーに依存すると云うことは理解しておく必要はある。