CSS
scss
webfont

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

M+ 1p ( 早期アクセスの Mplus 1p ) の表示がなんかおかしい、2〜3日前から表示されてないことに気づきました。

フォントの参照方法がおかしいとかでしょうか?でもつい最近まで見れてたし…

@import '//fonts.google~~~' で読み込んでいたけど素直に <link> タグにしたほうがいいのかな?などいろいろ考えていましたが…

Google Fonts + 日本語 早期アクセス を見てみると…

CAPTURE.jpg

あれ? 下の 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 にした方が格好よかったですかね。

まあ、ひとまずこれで問題なく表示されました。