目次
概略
blogger で WEB フォントを使いたくなった.
使用するWEB フォントの候補はオープンソースフォントの Noto Sans ファミリー.
Noto Sans ファミリーは Google が提供している.
このファミリーのNoto Sans CJK というバージョンを採用した。
以降には WEB フォント Noto Sans CJKを blogger へ 適用するまでの履歴を記述する。
Webフォント適用までの履歴
対象のhtmlファイルに @font-face を適用
対象のhtmlに @font-face を適用。しかし、この実装ではフォントファイルのダウンロードが完了するまでフォントレンダリングが反映されない。ダウンロードの非同期化の手段を探る。
フォントファイル 非同期ダウンロード Web Font Loader
フォントファイルの非同期ダウンロードに適した JavaScript、Web Font Loader を使う。
@font-face を外部CSS化と公開
Web Font Loader は @font-face が定義された css ファイルへの URL を使うので、これも適当なファイル共有サービスへアップロード。
@font-face {
font-family: 'NotoSansCJKjp-DemiLight';
src: url('適当なファイル共有サービス/NotoSansCJKjp-DemiLight.otf') format('opentype');
}
#NotoSansCJKjp-DemiLight {
font-family: 'NotoSansCJKjp-DemiLight';
}
Web Font Loader を blogger の テンプレート html へ埋め込み
<script src='http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
<!--
WebFont.load({
custom: {
families: [ 'NotoSansCJKjp-DemiLight' ], // 読み込みたいフォントファミリ
urls: ['適当なファイル共有サービス/webFonts.css'] //@font-face が定義された css ファイルへの URL
},
loading: function() {
// ロードが開始されたとき
},
active: function() {
// Web Fontが使用可能になったとき
},
inactive: function() {
// ブラウザがサポートしていないとき
},
fontloading: function(fontFamily, fontDescription) {
// fontFamilyのロードが開始されたとき
},
fontactive: function(fontFamily, fontDescription) {
// fontFamilyが使用可能になったとき
},
fontinactive: function(fontFamily, fontDescription) {
// fontFamilyをブラウザがサポートしていないとき
}
});
//-->
//]]>
</script>
</head>
対象のhtmlファイルに Web Font Loader を適用
Web Font Loader を使うことで、フォントに関するイベントをフックし、CSSで制御できるようになる。(参考)
- 読み込み（.wf-loading）：Web フォントの読み込み中
- アクティブ（.wf-active）：Web フォントがアクティブな状態
- 非アクティブ（.wf-inactive）：Web フォントが非アクティブな状態
それを対象のhtmlファイルに適用する。
.wf-loading body {font-family: sans-serif;}
.wf-active body {font-family: "NotoSansCJKjp-DemiLight";}
.wf-active h3 {font-family: "NotoSansCJKjp-DemiLight";}
.wf-active h2 {font-family: "NotoSansCJKjp-DemiLight";}
.wf-active h1 {font-family: "NotoSansCJKjp-DemiLight";}
.wf-inactive body h2 h1 {font-family: sans-serif;}
フォントのサブセット化
Web Font Loader により 非同期ダウンロードに対応したが、まだレンダリングに時間がかかる。
時間がかかる理由はフォントのファイルサイズが16MB弱と大きく、初回アクセス時などノンキャッシュ環境では、レンダリングまでかなり待たされてしまう。
モバイルネットワークといった公衆網ではとても使えない。
そこで最低限の文字だけを抽出したサブセット化によりファイルサイズの圧縮を試みた。
抽出した文字は、 常用漢字(JIS第1水準漢字), ひらがな, カタカナ, 半角英数字, 全角英数字, 記号。
結果、数百キロバイトまで圧縮に成功。
@font-face 外部CSSの更新
フォントのサブセット化に併せて @font-face 外部CSSの更新。
/* NotoSansCJKjp-DemiLight-Subset */
@font-face {
font-family: 'NotoSansCJKjp-DemiLight-Subset';
src: url('適当なファイル共有サービス/NotoSansCJKjp-DemiLight-Subset.eot'); /* IE9 Compat Modes */
src: url('適当なファイル共有サービス/NotoSansCJKjp-DemiLight-Subset.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('適当なファイル共有サービス/NotoSansCJKjp-DemiLight-Subset.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('適当なファイル共有サービス/NotoSansCJKjp-DemiLight-Subset.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
#NotoSansCJKjp-DemiLight-Subset {
font-family: 'NotoSansCJKjp-DemiLight-Subset';
}
対象htmlファイルのフォントを差し替え
フォントのサブセット化に併せて、対象htmlファイルのフォントを差し替え。
.wf-loading body {font-family: sans-serif;}
.wf-active body {font-family: "NotoSansCJKjp-DemiLight-Subset";}
.wf-active h3 {font-family: "NotoSansCJKjp-DemiLight-Subset";}
.wf-active h2 {font-family: "NotoSansCJKjp-DemiLight-Subset";}
.wf-active h1 {font-family: "NotoSansCJKjp-DemiLight-Subset";}
.wf-inactive body h2 h1 {font-family: sans-serif;}
モバイル用カスタマイズ
blogger の テンプレート の モバイル 設定を変更する。これを変更しないとモバイルで閲覧した場合に Web Font が適用されない。
携帯端末では現在のテンプレートのモバイル バージョンを表示する。はい。携帯端末でモバイル テンプレートを表示する。
モバイル テンプレートを選択 を カスタム へ変更。
ライセンスと告知の公開
オープンソースフォントの Noto Sans ファミリー とはいえ、サブセット化による改変はライセンスに則る。
License と NOTICE を サブセット化フォントと同じパスへ設置した。
License 参考 Noto is Google’s font family that aims to support all the world’s languages. Its design goal is to achieve visual harmonization across languages. Noto fonts are under Apache License 2.0. http://www.apache.org/licenses/
NOTICE 参考
Outline
Noto Sans CJK has been provided by Google.
The following fonts are derived font from free OpenType fonts Noto Sans CJK.
NotoSansCJKjp-DemiLight-Subset.eot
NotoSansCJKjp-DemiLight-Subset.otf
NotoSansCJKjp-DemiLight-Subset.ttf
NotoSansCJKjp-DemiLight-Subset.woff
Change
The subset of the following
Kanji (JIS first level Chinese characters ) , Hiragana , Katakana , alphanumeric characters , double-byte alphanumeric characters , symbols
License
The above font conforms to the following license.
Apache License 2.0
http://www.apache.org/licenses/LICENSE-2.0.html
概略
Noto Sans CJKはGoogleによって提供されています。
下記のフォントは、フリーの OpenType フォント Noto Sans CJK からの派生フォントです。
NotoSansCJKjp-DemiLight-Subset.eot
NotoSansCJKjp-DemiLight-Subset.otf
NotoSansCJKjp-DemiLight-Subset.ttf
NotoSansCJKjp-DemiLight-Subset.woff
変更
下記をサブセット化
常用漢字(JIS第1水準漢字), ひらがな, カタカナ, 半角英数字, 全角英数字, 記号
ライセンス
上記のフォントは下記ライセンスに準拠します。
Apache License 2.0
http://sourceforge.jp/projects/opensource/wiki/licenses%2FApache_License_2.0
参考リソース
- @font-face 外部CSS
- NotoSansCJKjp-DemiLight サブセット
- License
- NOTICE
