WEBフォントを遅延ロードするようにしました¶
WEBフォントが読み込まれるまで文字が表示されない問題を解決する為に、 Web Font Loader を使ってWEBフォントを遅延ロードするようにしました。
_templates/layout.html
<script type="text/javascript">
WebFontConfig = {
custom: {
families: ['mplus-2c-regular', 'mplus-2m-regular', 'mplus-2c-light'],
urls: ['http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.css']
},
timeout: 10000
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
_static/style.css
.wf-mplus2cregular-n4-active h1 {
font-family: mplus-2c-regular, sans-serif;
}
.wf-mplus2mregular-n4-active pre {
font-family: mplus-2m-regular, sans-serif;
}
.wf-mplus2clight-n4-active body {
font-family: mplus-2c-light, sans-serif;
}
ついでにレスポンシブUIに対応しました。テーマをmodern5に変更して微調整しただけなんだけど。もうちょっと「キャラバン」っぽいデザインや配色にしたいけどそれは追々やって行こう。