何を隠そう、当サイトもGoogleの人気Webフォント「Noto Snas CJK JP」を利用しています。
日本語フォントをそのまま使用すると、表示速度が遅くなったり、対応していないブラウザがあったりと様々な問題がありますが、これを解決するのが2つのツールです。
サブセット化、複数フォーマット作成ツール
@font-faceでフォントファイルを読み込むCSS
フォントを読み込むためのCSSも作成しました。
GitHubでダウンロードできますので、自由にお使いください。
使い方は、CSSにこのように記述します。
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 100;
src: url('../fonts/NotoSansCJKjp-Thin.woff2') format('woff2'),
url('../fonts/NotoSansCJKjp-Thin.woff') format('woff'),
url('../fonts/NotoSansCJKjp-Thin.ttf') format('truetype'),
url('../fonts/NotoSansCJKjp-Thin.eot') format('embedded-opentype');
}
・・・
実際の表示サンプルはこちら!
各ブラウザのサポート状況
ほぼ全てのブラウザに対応していますので、何も問題ないかと思います。
こちらから様々なブラウザの対応表が調べられます。
Can I use… Support tables for HTML5, CSS3, etc

@font-face
EOT – Embedded OpenType fonts
TTF/OTF – TrueType and OpenType font support
WOFF – Web Open Font Format
WOFF 2.0 – Web Open Font Format
CDNを利用する方法
結論、自分のサーバーにフォントを配置するより、CDNの方が良さそうです。
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
font-family: 'Noto Sans JP', sans-serif;
もしくは、
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
font-family: 'Noto Sans Japanese', sans-serif;
どちらを選ぶかは、あなた次第!
コメント
[…] Googleの日本語WEBフォント「Noto Sans CJK JP」をサブセット化して配布中 […]