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

M+ 1p ( 早期アクセスの Mplus 1p ) の表示がなんかおかしい、2〜3日前から表示されてないことに気づきました。
フォントの参照方法がおかしいとかでしょうか？でもつい最近まで見れてたし…
`@import '//fonts.google~~~'` で読み込んでいたけど素直に `<link>` タグにしたほうがいいのかな？などいろいろ考えていましたが…
[Google Fonts + 日本語 早期アクセス](https://googlefonts.github.io/japanese/) を見てみると…
![CAPTURE.jpg](https://qiita-image-store.s3.amazonaws.com/0/202008/871321fd-0cef-ca20-10f4-8695fe7b530e.jpeg)
あれ？ 下の Rounded M+ 1c は表示されてるけど、上のは明らかに M+ 1P じゃない…
どういうことなんでしょうかね。しかも M+ 1p だけっぽいです。

## M+ Web Fonts Project からダウンロードしたフォントを使うことに
というわけで、早期アクセスはやめて [M+ Web Fonts Project](http://mplus-webfonts.osdn.jp/) からフォントを落としてくることに。

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 ごとにソースパスを書いていく感じです。

```css
/* 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 にした方が格好よかったですかね。
まあ、ひとまずこれで問題なく表示されました。