誰にも知られずに、しれっと始まりました株式会社イーナの技術ブログですが、アウトプットや備忘録の場としても頑張って更新していきたいと思います。

記念すべき？初回は個人的に最近注目しているGoogle fontについて書きたいと思います。

Google fontとは？

2010年よりWebフォント提供を開始した、素敵なこと極まりないサービスです。（※無料）
これまで数年間は英語フォントしかなく、日本人には使いどころは限られていましたが昨年10月からついに日本語フォントの「Noto Sans Japanese」の提供を開始しました！
Googleのサーバーにあらかじめアップされているフォントを参照するので、自分でWebフォントを実装するよりも手間がかかりません。

工数に追われるデザイナーさんも多いと思いますので、心強い味方となってくれるのではないしょうか。

これまで、綺麗なフォントで文字を表示させたい場合は画像として書き出して表示させるか、Webフォントを使用するかでした
ですが画像として表示させるとSEOが・・・また、Webフォントを使用するとなると日本語フォントをWebフォント用に拡張子を変換して・・サーバーにアップして・・指定して・・
かつ、日本語フォントは英語フォントに比べてデータ量が膨大になる為 表示が重たくなってしまう・・というような多少のデメリットがありました。
それらのデメリットを出来る限り解消してくれる素敵なサービスがGoogle fontです。

※もちろん、それらの多少のデメリットを解消してとても綺麗に効果的にWebフォントを使用しているサイトもたくさんあります。

待望の日本語フォントNoto Sans Japanese

前述の通り、昨年の10月から待望の日本語フォントである「Noto Sans Japanese」が登場しました。
無料で使用ができて自分のサーバーに置いても良いのです。
※再配布する場合のみ、ライセンス表記だけしっかりしてください。

まず、太さは7種類あるのでデザインによって繊細に使い分けられます。
高速かつ信頼のおけるGoogleサーバからフォントを読み込むので嬉しい限りです。

実装方法について

1. CSSファイル内にNotosansをインポートします。

@import "http://fonts.googleapis.com/earlyaccess/notosansjapanese.css";

2. あとはお好きな箇所にfont-familyを記述して実装完了です。

font-family: "Noto Sans Japanese", !important;

これだけで、Googleフォントの実装が可能です。
Webサイト内に一番表示されるものはテキスト（文字）ですので、サイトを印象付ける極めて重要なファクターとなりますし
手間も全くかからないので、一度実装をご検討されてはいかがでしょうか。

ちなみに、このブログ記事もNoto Sans Japaneseを採用しています。