一目惚れフォントをこのブログで

凛とした芯のある美しい女性。かわいさの中に強さが見える。どこかよそ行きで、教科書的、あるいは公式的な雰囲気も。でも何故かカジュアル。そんな不思議な魅力を放つ

フォント

「Noto Sans Japanese」

GoogleとAdobeの共同開発で誕生したまだ御年0歳か1歳かそこらのこのフォントを、去年の後半にどこかのWebサイトで見て、その瞬間恋に落ちてしまいました。

僕はちょっとだけフォントマニアです。そこまで詳しくはないですが、Webを仕事にしてるとフォントとはやはりちょっとは向き合わないといけません。印刷業ほどではないと思いますけどね。
Webを主戦場に作られたっぽいので、印刷屋さんからすると「何だコレｗ使えねー」だと思うんですが、Webでは最高の仕事をしてくれます。

このブログでも使いたいなーと前々から思ってましたが、今流行りのウェブフォントというやつで、自前のサーバーにフォントをアップしなければいけません。文字数の少ない欧文ならともかく、日中韓の三字は2,000年前の漢字文明のせいでとにかく字の種類が多い。。。ロードも当然遅くなる。
しかも、重いのを我慢して使おうと思っても、他人のサーバーに上がったフォントを勝手に使われちゃ困るというので、同じドメイン上に上がったフォントしか使えないというルールがあり（当然かｗ）無料ブログの場合は、自分のレンタルサーバーにアップしても自分のブログでは使えないという事態に。。。WordPressなら自前サーバーにアップするので何の問題も無いけどね。
これは無料ブログを使っているNotoSansマニアにはちょっと耐え難いお仕置き状態。

だったんですが、最近どういう理屈かは分かりませんが、あるソースを書くだけでアップしなくてもウェブフォントとして使えるというのが判明しまして。。。しかも以前の「自分でアップのNotoSansウェブフォント」はFireFoxで出ないという不具合がありましたが、この「ソースでNotoSansウェブフォント」は今のところ自分で手軽に確認できる全てのブラウザで表示されてるという・・・
何だこの魔法のソース？　って感じですが、今後もこのフォントは頻繁に使うので以下自分用にメモ

@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 300;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-DemiLight.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-DemiLight.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-DemiLight.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Medium.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Black.otf) format('opentype');
}

スタイルシートに使いたい太さのソース書いて、あとは使う箇所のファミリーに「Noto Sans Japanese」と書くだけ。簡単。

ということで早速このブログのフォントもNotoSansに変更b