M+ 1p ( Google Fonts 早期アクセス ) 2、3日前から表示されない、の対応の備忘録 #CSS

M+ 1p ( 早期アクセスの Mplus 1p ) の表示がなんかおかしい、2〜3日前から表示されてないことに気づきました。
フォントの参照方法がおかしいとかでしょうか？でもつい最近まで見れてたし…
@import '//fonts.google~~~' で読み込んでいたけど素直に <link> タグにしたほうがいいのかな？などいろいろ考えていましたが…
Google Fonts + 日本語早期アクセスを見てみると…

あれ？下の Rounded M+ 1c は表示されてるけど、上のは明らかに M+ 1P じゃない…
どういうことなんでしょうかね。しかも M+ 1p だけっぽいです。

M+ Web Fonts Project からダウンロードしたフォントを使うことに

というわけで、早期アクセスはやめて M+ Web Fonts Project からフォントを落としてくることに。

M+ 1p だけで事足りるので、

mplus-1p-black
mplus-1p-bold
mplus-1p-heavy
mplus-1p-light
mplus-1p-medium
mplus-1p-regular
mplus-1p-thin

の各 ttf, eot, woff をダウンロードしてきました。（ weight が 7つ ✕ 3形式で 21 ファイル… ）
自分は下記のようなディレクトリに配置しておきました。

_assets/
　　├─　fonts/
　　│　　　└─　mplus-1p/
　　│　　　　　　├─　mplus-1p-black.eot
　　│　　　　　　├─　mplus-1p-black.ttf
　　│　　　　　　├─　mplus-1p-black.woff
　　│　　　　　　├─　mplus-1p-bold.eot
　　│　　　　　　├─　mplus-1p-bold.ttf
　　│　　　　　　├─　mplus-1p-bold.woff
　　│　　　　　　├─　mplus-1p-heavy.eot
　　│　　　　　　├─　mplus-1p-heavy.ttf
　　│　　　　　　├─　mplus-1p-heavy.woff
　　│　　　　　　├─　mplus-1p-light.eot
　　│　　　　　　├─　mplus-1p-light.ttf
　　│　　　　　　├─　mplus-1p-light.woff
　　│　　　　　　├─　mplus-1p-medium.eot
　　│　　　　　　├─　mplus-1p-medium.ttf
　　│　　　　　　├─　mplus-1p-medium.woff
　　│　　　　　　├─　mplus-1p-regular.eot
　　│　　　　　　├─　mplus-1p-regular.ttf
　　│　　　　　　├─　mplus-1p-regular.woff
　　│　　　　　　├─　mplus-1p-thin.eot
　　│　　　　　　├─　mplus-1p-thin.ttf
　　│　　　　　　└─　mplus-1p-thin.woff
　　└─　css/
　　　　　└─　app.css

で、 CSS でこれらのフォントを定義するのですが、フォント名はこれまで通り Mplus 1p にしておきました。
一応、早期アクセスを参照している @import '//fonts.googleapi~~~' や <link href='//fonts.googleapis~~~'> は一旦コメントアウトしておいてます。

CSS では下記のようにフォントの weight ごとにソースパスを書いていく感じです。

/* thin - 100 */
@font-face {
  font-family: 'Mplus 1p';
  font-weight: 100;
  src: url('../fonts/mplus-1p/mplus-1p-thin.eot');
  src: url('../fonts/mplus-1p/mplus-1p-thin.eot?#iefix') format('embedded-opentype'),
    url('../fonts/mplus-1p/mplus-1p-thin.woff') format('woff'),
    url('../fonts/mplus-1p/mplus-1p-thin.ttf') format('truetype');
}

/* light - 300 */
@font-face {
  font-family: 'Mplus 1p';
  font-weight: 300;
  src: url('../fonts/mplus-1p/mplus-1p-light.eot');
  src: url('../fonts/mplus-1p/mplus-1p-light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/mplus-1p/mplus-1p-light.woff') format('woff'),
    url('../fonts/mplus-1p/mplus-1p-light.ttf') format('truetype');
}

/* regular - 400 */
/* ...続く... */

…と、だんだん @font-face 何回も書くのがつらくなったので SCSS で下記のようにしました。

_mplus-1p.scss


$fontPath: "../fonts/mplus-1p";

@mixin font-face($weight,$name) {
  font-family: 'Mplus 1p';
  font-weight: $weight;
  src: url('#{$fontPath}/mplus-1p-#{$name}.eot');
  src: url('#{$fontPath}/mplus-1p-#{$name}.eot?#iefix') format('embedded-opentype'),
    url('#{$fontPath}/mplus-1p-#{$name}.woff') format('woff'),
    url('#{$fontPath}/mplus-1p-#{$name}.ttf') format('truetype');
}

@font-face {
  @include font-face(100,'thin');
}

@font-face {
  @include font-face(300,'light');
}

@font-face {
  @include font-face(400,'regular');
}

@font-face {
  @include font-face(500,'medium');
}

@font-face {
  @include font-face(700,'bold');
}

@font-face {
  @include font-face(800,'heavy');
}

@font-face {
  @include font-face(900,'black');
}

あ、each にした方が格好よかったですかね。
まあ、ひとまずこれで問題なく表示されました。