完全なる自分のための覚書です。
フォント指定って、悩ましいですよね。
どのデバイスでの指定したフォントで出て欲しい。。。
※注意※字詰めができないフォント
Noto Serif JP、ヒラギノ明朝 ProNは字詰めができません。(多分Noto Sans JPも)
字詰めができないとデザインによっては弊害が出るので、使い所を選ぶ必要がありそうです。
明朝体を指定(androidでは要ウェブフォント)
$FONT-BASE: 'ヒラギノ明朝 ProN' , 'Hiragino Mincho ProN' , '游明朝','游明朝体',YuMincho,'Yu Mincho' , 'MS 明朝' , 'MS Mincho' , HiraMinProN-W3 , 'TakaoEx明朝' , TakaoExMincho , 'MotoyaLCedar' , 'Droid Sans Japanese' , serif;
IEでもChrome、ios、safariでも明朝体で表示されます。
しかしアンドロイドスマホは明朝体が無いので、アンドロイドまで対応したければウェブフォント必須。
@import でsassファルにインクルードしてくれば、head内にタグを書かなくても大丈夫。
(@importが近いうちに廃止されるようなので、その点はお気をつけください)
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:200,300,400,500,600,700,900");
上記ならIEも明朝体で表示されますが、IEってgoogle font非対応だったんですね・・・知らなかった・・・
游ゴシック体を指定
$ff-default:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
他にもあったら追記しまーす。