こんにちは、ブロガーのこーんです。
画面の表示フォントを変更してみました。
今回はGoogleのWebフォントを使ってみることにしました。
Webフォントとは通常は端末にインストールされているフォントで文字を表示していますがそれをダウンロードでもって表示させる仕組みです。
フォントがあらかじめインストールされている必要がないのと、機種ごとにフォントを指示する必要がないため同じフォントを利用することで全ての端末で同一のフォント表現が可能になります。
またCSSのフォント表記もシンプルになります。
GoogleのWebフォントなら利用が無料。
まるでオンラインゲームのようにEary Access（早期アクセス）方式を採用しています。
いったいそれはなんぞや？ですが、早い話がβ版みたいなものですね。
動作保証、サポートはしないけど無料で使えますよということで海外のオンラインゲームなどでよくみられる手法です。
販売前にユーザーを集められるのと改良が加えていけるので開発会社としては本格的に投資する前に需要予測がたてられたり環境的なテストのレポートを集めることができます。
将来的には有料になるかもしれませんがGoogleならずっと無料だと思いますけどねおそらく。
使えるフォントは9種類。（2017/12/26現在）
フォントは全部で9種類。
かなり個性的なフォントもあるので使えるシーンが限られてくるとは思いますが、⑨Noto Sans Japapneseなどは標準的なゴシック体なので普通にブログ運用でも使えますね。
① M+ 1P（森下浩司）
② Rounded M+ 1c（自家製フォント工房）
③ はんなり明朝 Hannari（中井良尚）
④ こころ明朝 Kokoro（中井良尚）
⑤ さわらび明朝 Sawarabi Mincho（mishio）
⑥ さわらびゴシック Sawarabi Gothic（mishio）
⑦ ニコモジ Nico Moji（Ku-Ku Do-Font）
⑧ ニクキュウ Nikukyu（中井良尚）
⑨ Noto Sans Japanese（西塚涼子）
今回は①M+ 1Pを使ってみることにしました。
すこしクセがありますが見やすいフォントだと思いますし、文庫本などもこういった少し特徴がある書体だったりするじゃないですか。
なのでわたしの今回のイメージは文庫本なんです。
とくに細字にしたときに形がきれいなところが決め手ですね。
細字と太字が同じ書体とは思えないぐらいまったく違いますが基本の形がきれいなのでどっちもいいですね。
さっそく導入してみましょう。
導入はめっちゃシンプル。
以前フォントを変更しましたが今回はもっとシンプルです。
なんと2行だけ。
なんて簡単なんでしょう。
Webフォントを読み込む。
設定 → 詳細設定 → headに要素を追加
を開きます。
以下のソースを貼り付けて保存します。
<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
次にCSSを編集します。
デザイン → カスタマイズ → {}デザインCSS
を開きます。
以下のソースを追加します。
以前のfont-familyの記述は削除しましょう。
font-family: 'Mplus 1p', sans-serif;
設定は以上です。
オトンはおもった。
できましたか？むっちゃ簡単ですよね。
フォントも1書体を選ぶだけなのでシンプルです。
これによっていろんな端末からでも同じ見た目になるわけです。
インストールフォントだと「游ゴシック体」を設定しておけばほぼ確実だと思いますがWebフォントはこれから利用するケースも増えてくると予想されますので慣れておくとよいかと思います。
そうえいばわたしにとってWebフォントはグロナビを作成する際にAwesome Fontで既に経験済でしたね。
今後もいろんな武器に使えそうなのでWebフォントいろいろと活用してみたいと思います。
ではまた！
追伸：結局自宅の19インチスクリーンだと表示が汚く元にもどしちゃいました。低解像度には弱いようです。
