Google Web Font

Google Noto Fonts

GoogleがクラウドでWebフォントを配信していましたが、日本語Webフォントは重いイメージがあったので敬遠していました。しかし、さほどそうでも無さそうなので、サイトのフォントを変えてみました。以下覚書として。

設定は非常に簡単。使用したフォントは「Noto Sans Japanese」。「Noto Sans Japanese」は、AdobeとGoogleが共同開発したフォントです。Noto Sans CJK JPと言う名でダウンロードも出来ます。設定方法は、CSSでWebフォントを読み込みCSSで設定したい箇所のfont-familyを「Noto Sans Japanese」に指定しただけです。

CSSかHTMLに挿入

<style>
  @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
</style>

CSSでfont-familyを指定

<style>
body *{
  font-family: 'Noto Sans Japanese', sans-serif;
}
</style>

 

懸念していた重さについてですが、更新し1回目だけいつもより遅く表示。その後はキャッシュを読み込んでいると思うので、いつも道理の表示に戻りました。スマートフォン(iphone6 plusにて)での表示も同じく1回目だけ遅く表示。その後は通常道理の表示スピード。恐らく、閲覧者が他のサイトで同じWebフォントを既にキャッシュしていたら、読み込みも軽減されると思われます。

 

「Noto Sans Japanese」はフォントウェイトも幾つか用意されているので、必要に応じて太さを変えてみるのもよいかもです。

<style>
h1{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 900;
}
</style>

SNOWBOARDに出会ったから山を登るようになった。写真を撮るようになった。スケートとサーフィンとサップとキャンプを始めた。怪我も増えた。沢山の人と出会うことが出来た。感謝と孤独を覚えた。家族の絆が深まった。自分と向き合う時間が長くなった。お陰で終わらない自分との戦いが続く羽目になった。疲れるぜー。


コメントを残す