@font-faceを使ってみた

今日はやたらと連投しております！！色々メモしときたかった事が多いんですねぇ。。。
これもその一つ！！ホント今更かよ感が凄いですが。。。CSS3の目玉商品、@font-faceを試してみましたっ！！

突然使いだした経緯

今まで日本語のWebフォントは速度低下させる原因でしかないので、Web Fontを使ったとしてもGoogle Fontsにある英字のみでした。
ところが最近の案件のほとんどが、何故か日本語はNoto Sans JP使ってくださいーと言われるようになり。。。
普通にCSSでimportしてたのですが、もしかして違うんじゃね？と違和感を覚えました。

// 普通にインクルード
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);

感じた違和感

上記の通り、普通に何も考えずインクルードしていたのですが、何か読み込み遅いなぁと思いつつも、こういうもんだ。と思っていました。
しかし、Noto Sans JPにはウェイトが沢山あり、もしかするとこれを全部読み込んでいるからでは？と閃きます。

というのも、実際に使っているのはレギュラー(400)とボールド(700)くらいであり、その他のウェイトは特に必要ありません。
上記のインクルードURLを確認してみると、やはり全ウェイトに対応しているようです。(内部的に全部読み込んでいるかは不明)

これは直す価値があるのでは！？

とりあえずやってみる

そういった経緯があり、必要なウェイトだけを読み込めば、速度向上するのではないかと思い、早速試してみることに！！
初font-faceでイマイチやり方が分かりませんでしたが、そんなに難しくはなかった。。。
とりあえず読み込みは以下で出来ました！！

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
    src: local("Noto Sans CJK JP Regular"),
      url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
      url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: bold;
  font-weight: 700;
    src: local("Noto Sans CJK JP Bold"),
      url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
      url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
}

srcにlocal(○○○)を入れることで、クライアントのローカルにフォントがあれば、それを利用する。といった意味があるそうです。
確かに無駄な読み込みが無くなるので、記述しといた方がいいかと！！

あとは、いつも通りfont-familyで指定するだけ！

$sanserif : 'Noto Sans JP', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

body{
  font-family: $sansserif;
}

こんな感じでしょうか！？

結果

試しにやってみようと思った程度でしたが、速度があがりました。。。
ボクの推測が正しいのかどうかは不明ですが、少なくても今後はこの指定で良いかなぁと感じました。

Noto Sans JPで速度が落ちている気がする方は、一度試してみる価値があるかも！？

以上、初@font-faceを使ってみたお話でした〜！
ありがとうございましたっ！！

突然使いだした経緯

感じた違和感

とりあえずやってみる

結果

CATEGORIES