モリサワのTypesqareでWebフォントを導入してみました。

どうも、たかのりうむです。

 

このブログにもいよいよ、Webフォントを導入してみました。無料だし(これ重要)、導入もけっこう簡単で(強いて言うならモリサワのサイトが分かりにくいです)、サイト全体の雰囲気を変えることができるのでとてもおすすめです。

 

 

そもそもWebフォントって何?

あんまり詳しくないのですが、

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

出典:Webフォント - Wikipedia

だそうです。要するに、フォントを細かく指定していたのがWebフォントを導入するとサーバ上のフォントを参照して表示するので、環境によってデザインがごちゃごちゃ変わることがなくなりますよってことみたいです。

 

どんな環境でも同じデザインで閲覧できる(させられる)ので、自分の意図するものを環境に依存せずに確実に伝える事ができるのがメリットみたいですね。ただ、どっかのサーバにフォントファイルを参照しに行くので、読み込みと表示にちょっと時間がかかるというデメリットもあります。

 

どこのWebフォントを使う?

今回僕が利用したモリサワのTypesquareを始めとして、色んな所がWebフォントを提供しています。悩んだのがこの2つ。

モリサワ Typesquare

typesquare.com

Google Font + 日本語 早期アクセス

googlefonts.github.io

正直どっちでも良いかなとは思ったんですが、使える日本語の書体がモリサワの方が豊富でいろんなフォントが試せるっていうのと、何よりもフォントといえばモリサワでしょ!という素人丸出しの発想モリサワのTypesquareを利用することにしました。

 

また、どっちも無料で利用可能ですが、Typesquareの場合は月に1万PVまでクラウドからフォントが配信されるというプランです。なので、複数のフォントを使いたいとか月1万PVを超えるようなサイトを運営している人は金を払うかおとなしくGoogle Fontを使ったほうが良いと思います。

 

導入の手順は?

ほぼやることは何もないです。笑

  1. モリサワのサイトで利用者登録
  2. 利用書体を選んで登録
  3. 利用サイトのURLを登録
  4. HTMLのタグをコピー
  5. Webページの<head>~</head>にコピーしたHTMLタグをペースト
  6. cssを設定

です。1.〜4.までがモリサワのサイト上で行うこと、5. 6.が自分のサイトでやることです。

5.については、はてなの管理画面の設定>詳細設定の「headに要素を追加」、6.については

デザイン>デザインcssにそれぞれ記載すればOKです。

 

ちなみに、設定なんかよりも2.、3.あたりの登録が、モリサワのサイトのユーザビリティが悪くて少し悩みました。

 

ちなみに、cssに設定したのは

body { font-family:"フォント名"; }

の一撃一括設定です。なんせ一書体しか使えないですし、いろんなフォントを組み合わせて使うほどオシャレさんじゃないので。笑

 

設定完了。導入してみて感じたこと。

さっきの設定をした状態でサイトをりロードすると…、見た目が変わっています!実に素晴らしい…。

 

実際導入したメリットとしては、

  • サイトのイメージがガラッと変わる

というのが一番です。満足。

 

ただ、デメリットもあって、

  • フォントの読み込みに時間がかかる
  • 太字が太字にならない

というのが導入してすぐに思ったことです。

太字が太字にならないのはCSSいじってどうにかできないもんかと今色々と調べております。またそれは別の機会に。

 

それにしても、こういうカスタマイズとかは楽しいですね。ちょこちょこカスタマイズを続けていきたいと思います。