Open Sans+Source Code Pro

このブログの欧文フォントにOpen Snasを導入してみた。

ヒラギノと合わせたときにナチュラルな感じを受ける。また、ウェイトごとにイタリックも用意されておりバリエーションが豊富なのがよい。

Web Fontの導入にあたり、Google Web Fontの恩恵を大いに肖りました。導入方法はいろいろあるが一番手っ取り早いのが、以下のようにlink要素で読み込むかたち。

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700" rel="stylesheet" type="text/css">

重さも考えてウェイトが400と700のものをイタリックを含めてチョイス。
たくさん読み込むとサイズが大きくなるのでそのあたりは要相談です。

あとはCSSでfont-familyを指定するだけでOK。

font-family: 'Open Sans', sans-serif;

このように手軽にWeb Fontを使う事ができる。いい時代ですね。

---

ついでにソースコード用のフォントにはSource Code Proを導入した。
巷ではPanic Sans（Deja Vu Sans Mono）やRictyが人気だが文字が詰まってる感があり窮屈なので、自分はSource Code Proを好んで使っている。開発環境も Source Code Pro。若干まるっとしてて適度に緩い感じがいいよね。

var Sample = (function() {
  'use strict';

  function Sample(args) {
    if (!(this instanceof Sample)) {
      return new Sample(args);
    }
  }

  Sample.prototype = {
    hoge: function() {}
  };

  return Sample;
}());

まだWindows環境で確認していないので、しっくりくるかどうか…