無意義なつぶやき

渋谷ではたらくエンジニアブログ。

マテリアルデザインに合わせてRobotoフォントを使う

f:id:sd08013:20141124130500p:plain



Android5.0 lolipopが発表され、より直感的な操作が可能なマテリアルデザインが注目を浴びるようになりました。色合いやアニメーションは既に様々なところで取り上げられていますが、せっかくだからフォントにもこだわりたいと思います。
lolipopで採用されているのはRobotoフォントであり様々なデバイスで見やすいように感覚とリズムが調整されているようです。英数字のみで日本語には対応していないようですが一度取り入れてみてはいかがでしょうか?

簡単なので説明するまでもないと思いますが、導入までの手順です。
ここからどうぞ

Google Fonts

1.左上のテキストボックスからrobotoを検索
2.Add to Collectionボタンをクリック
3.下のCollectionにフォントが追加されるのでUseボタンをクリック
4.項目の3つ目 Add this code to your websiteに表示されるコードを貼り付ける
5.HTMLにコード等を記述する
<head>
   <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto+Slab' rel='stylesheet' type='text/css'>
   <style>
      body { font-family: 'Roboto'; }
   </style>
</head>

これでRobotoフォントが使用可能になります。