Google Fonts

Google Fonts

Google Fontsの日本語フォント「Noto Fonts」の使い方
↑この記事で基本的には事足りる

デモ：http://codepen.io/mo4_9/pen/KgZEoO

style.scss

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

$list: 100, 300, 400, 500, 700, 900;

@each $i in $list{
  .font-jp#{$i}{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: $i;
  }
}

こんな感じで設定してあげると、.font-jp100という具合にスタイルを当てられる

参考
商用利用可能！高品質なオススメ日本語Webフォント8選（無料フォント多数）

サブセット

サブセットつくらないとならない時は以下を参照。

https://developer.mozilla.org/ja/docs/Web/CSS/@font-face
日本語Webフォントの流行の最適化「NotoSans」「サブセット化」

Webfont Generator

ひらがな、カタカナ、英字
http://tagnoheya.com/charlist/charlist2.html
こちらを全部コピペでいいかも
http://2dgames.jp/wp-content/uploads/2013/09/moji_list.txt

デザイン性とSEO効果を兼ね備えたWebフォントを使ってみた【基本知識と使い方まとめ】