福井も雪が降りいよいよ冬将軍の到来です。咳喘息にかかった私は咳が止まらず苦しい思いをしています。

さて、昨年話題に上がっていたGoogleFontsの早期アクセスでフォントが9書体、使用できるようになりました!!

最近では「游ゴシック」も使えるようになってきてちょっとうれしい限りです。メイリオが使えるようになって喜んでいたのが懐かしい・・・・

Webフォントってなんだっていうと

WebフォントはWWWのコンテンツ側がフォントデータを持ち、コンテンツ側から提供されるフォントデータに従って、Webブラウザなどの可視化（レンダリング）をともなうクライアントが文字表示を行うシステムおよびそのフォントである。(ウィキペディアより)

今まではフォントの種類があまりにも少なくて、キャッチコピーとかタイトルのような訴求力のあるものは画像で作ってそれを切り出してimgタグに貼りつけるって作業をしていました。
いままではそれでも十分間に合っていたのですが、例えば文字の修正が来ると、photoshopを立ち上げて修正して保存しなおして･･･なんて作業が結構面倒くさかったりします。
それに加えて最近はレスポンシブサイトが当り前！っていう時代に突入しました。画像をただ、縮小させて見せるだけだと見づらい・・なんてことも。
Webフォントは基本的に文字情報なので、ちゃんとhtmlで修正できます。フォントサイズを
小さくしたり色を付けたり文字間を広げたりっていう作業がcssで簡単にできます。

ま、ただいろいろと問題もありますが・・・

待ちに待ったGoogleFontsいまさらながら設定してみました。
早期アクセスということで試験的に使ってみてね！というものなのでまずはご自分のブログなんかで試してみるのがおすすめだと思います。

設置してみると

設置してみた

はんなり明朝とこころ明朝、ニクキュウ・ニコモジは漢字には対応していません。
にしてもさわらびとかRounded M+ 1cとかには惹かれます!!ぜひぜひ使ってみたい！まずは見出しに使用するところから始めてみたいですね！

Noto Sans Japaneseに至ってはフォント自体も結構読みやすくて好きなんですが、これはfont-weightをすごく沢山持っているっていうのがめちゃくちゃいいです！
こちらは玉ノ江こども園様で使用しました。

設置方法は簡単で

各フォントのスタイルシートをheadタグに読み込みます

<link href=”//fonts.googleapis.com/earlyaccess/notosansjapanese.css” rel=”stylesheet” />

で、cssにfont-familyを指定するだけ!!

.wf-notosansjapanese { font-family: “Noto Sans Japanese”; }

めっちゃ簡単!!あとはwindowsできれいに表示されないなどの問題が出ていますが、ある程度ならcssで解消できそうです。
Webフォントもっと書体がふえるといいな。

モリサワさんのTypeSquareからもモリサワのWebフォントがでていますね。無料のサービスもあるので、こちらも是非つかってみたいと思います。

保存