2013年末まで無料で使える「モリサワTypeSquare」の「クラウドフォント」を導入してみた!

2013/01/08
Written by: EISUKE
Category: IT

NewImage

最近、ブロガーさんたちの中でWebフォントが流行っている。

Webフォントとは、自分のサイトにフォントのファイルを埋め込み、それを表示させるというもの。

なので、フォントが異なる端末ごとでも同じフォントを表示させることが可能になるらしい。一部表示できないものもあるみたいだが。

ただ、Webフォントを使う以上、見やすいフォントにしなくては意味が無い。そこで、今回僕が使ってみたのが、フォントと言えばココ!「モリサワ」さんのフォントだ!

通常「モリサワ」さんのフォントを使うには購入するとか、ライセンスとか色々あるみたいだが、今回使ったのが「TypeSquare」という「クラウドフォント」というもの。

通常のWebフォントは前述した通り自分のサイトのサーバーにフォントをアップロードするが、クラウドフォントは「モリサワ」さんのところにフォントがある状態で、それを読み込む仕組みだ!

NewImage

これが、現在「¥0キャンペーン中」という事で導入した見た。PV数の上限とか書いてあるが、実際は関係なく使えるらしいw

見た目はどう変わったか

今回はスマートフォン用のサイトにだけ埋め込んでみた。見た目はこんな感じだ!

NewImage

NewImage


左が導入前、右がモリサワフォントの「Shin Maru Go Regular JIS2004」を導入したもの。

丸めのフォントで、くどい感じも無く結構いいんじゃないかと思う。若干Boldがわかりづらい点が気になる。

導入してみて気づいたこと

実際に、「クラウドフォント」を導入してみて「あれっ?」と思ったことがある。

それは、読み込み時間について。Webフォントはサーバー上にフォントがあるため、通常より読み込みが遅いのは知っていた。

しかし、「クラウドフォント」になるとそれが顕著に目立つ。というか時差が気になった。

だって記事自体は自分のサーバーから読み込んでるのに、フォントは「モリサワ」さんの所から引っ張ってきているから。

なので、少しのタイムラグがあり、自分のデバイスのフォントが一瞬表示されてから、後から「クラウドフォント」に切り替わるのが目に見てわかる。仕方ないのかな?

簡単に動画を撮ってみました。

導入方法

導入は結構簡単で、

1.会員登録

こちらより会員登録できます。無料です。

ご利用申込み | TypeSquare [タイプスクウェア]

2.サイト登録をして、Scriptを<head>内に記述

NewImage

NewImage

このScriptは個々で違ってくるので、会員ページの導入方法を参照してください。

3.好きな「クラウドフォント」をCSSに記述(普通に記述して問題ないです)

NewImage

記述例

body{
	font-family:'Shin Maru Go Regular JIS2004' ;
	}

終わり。

やっぱりフォントの老舗である「モリサワ」さんのフォントは見やすいです。「クラウドフォント」の代償である読み込みの遅延時間さえ気にならなければ良いと思いますよ。

注意

どうやら、Androidでは表示できないみたい。なんでだろう。僕の環境が悪いのかもしれません。ちょっと検証不足です。とりあえずGNとOpptimusLTEでは確認できませんでした。Android4.0のモトヤフォントが適用されちゃってます。

iPhoneのSafariでの表示は問題ないのですが、アプリ等に埋め込まれたWebViewでは表示できませんでした・・・。左がTweetList、右がFacebookです。

NewImage

NewImage


以上です。

まぁ、個人的には気に入っているのでいいです。今年の年末までですがいつまでコレを使うかな。

参考

[Å] Webフォント使用!スマホ版の本文を「可愛いフォント」に変更したよ | あかめ女子のwebメモ

Webフォントが楽しい!Webフォントの探し方と使い方・設置の仕方などなど。 | norirow’s Diary

TypeSquare [タイプスクウェア]

モリサワ 2012-10-26
¥ 44,786

Back To Top