再審査に挑もうと、いろいろチェックし修正をしていたらHTMLがおかしくなってしまいました。具体的には更新しても保存ができず、復元をしようとしても直近のバックアップではダメ。
残念ながら自力では修復できませんでしたので、気分転換にテーマを変え、WebFontのノトサンズを適用させてみたいと思います。
せっかくなのでvaster2でカスタマイズしたところはカテゴリにして残しておきますが、吹き出しとかが反映されなくなったのが残念です。
スクリーンショットとか取っておけばよかった。。。
そもそも、今見ているこのブログも使っているパソコンやスマートフォンによってフォントが違ってきます。つまり、各個人のデバイスに保存されているフォントで表示されます。
ブログならまだいいかもしれませんが、企業のオフィシャルサイトやショッピングサイトなど、特殊な文字やデザインにこだわっているWEBサイトはテキストを画像にしてきました。見え方が人によって違うと、ブランドイメージが定着していかないからです。
しかし、それでは更新に手間がかかるので、サーバー側が用意したフォントを使うことにより、どのデバイスでも同じようにみえるWEBフォントが開発されました。
フォントと言えばモリサワが有名です。もちろんWEBフォントも用意されています。しかし有料。他のフォント会社も有料だったりや商用利用に制限があったりします。
有料だと当ブログのような弱小ブログで使用するのは気が引けます。だってブログだって無料だからbloggerを選んでるんだし。
そこで、Goolgeが無料で商用利用化の「Google Fonts」を使ってみたいと思います。
ただし、WEBフォントはフォントの読み込みが必要になるので、表示速度が遅くなる懸念あります。。。
Google fonts（ノトサンズ）の実装
bloggerなのでデフォルトで設定できればいいんですけど、そうはいかないみたいです。
右側のメニューにフォント検索機能もあるので、いじってみるだけでも楽しいかもしれません。また、日本語だけでなく外国語も選べますが、沢山選ぶと読み込みに時間がかかるので注意が必要です。
 |
| 右上のプラスボタンを押してフォントを追加 |
フォントが決まったら、「Family Selected」と書いてある黒いバーを押します。メニューが開くので、CUSTOMIZEボタンを押し、さらに太字や斜体の決定をしていきます。
どこまで正確かわかりませんが、「Load Time」で目安がわかるので参考にしました。
 |
| EMBEDにコードが表示（左）／ CUSTOMIZEで太字などを選ぶ（右） |
毎度のことですが、カスタマイズする時は、必ずバックアップを取っておきましょう。
 |
| [テンプレート]⇒[HTMLの編集]⇒headタグ内 |
次に、設定したフォントのコードが表示されるので、<head>内とCSSにそれぞれコードを記述します。
HTMLの<head>内に記述するコードは、そのままコピーをすると「/」抜けているので、文末の>の直前に/（バックスラッシュ）を追加します。
最後に、CSSの「font-family」を記述します。
HTMLの<head>内に記述するコードは、そのままコピーをすると「/」抜けているので、文末の>の直前に/（バックスラッシュ）を追加します。
最後に、CSSの「font-family」を記述します。
 |
元々のテンプレート（左）／ Google fontsの適用後のテンプレート |
このテンプレートだけを考えれば、上品なテーマになっているので、明朝体の方がよかったと思います。それに、右上のアイコンも消えてしまいました。
自分が見慣れているだけなのかもしれませんが、明朝だとスマホでは読みにくいと思いゴシック系の書体を選びました。
