「かっこいい・かわいい・おしゃれ」が大好きな１９９０年生まれ、神奈川県出身。
MusicLover
無料で洋楽が聞ける音楽アプリ
CalCal Lite
給料計算が出来るシフト管理アプリ
最近、ブロガーさんたちの中でWebフォントが流行っている。
Webフォントとは、自分のサイトにフォントのファイルを埋め込み、それを表示させるというもの。
なので、フォントが異なる端末ごとでも同じフォントを表示させることが可能になるらしい。一部表示できないものもあるみたいだが。
ただ、Webフォントを使う以上、見やすいフォントにしなくては意味が無い。そこで、今回僕が使ってみたのが、フォントと言えばココ！「モリサワ」さんのフォントだ！
通常「モリサワ」さんのフォントを使うには購入するとか、ライセンスとか色々あるみたいだが、今回使ったのが「TypeSquare」という「クラウドフォント」というもの。
通常のWebフォントは前述した通り自分のサイトのサーバーにフォントをアップロードするが、クラウドフォントは「モリサワ」さんのところにフォントがある状態で、それを読み込む仕組みだ！
これが、現在「￥０キャンペーン中」という事で導入した見た。PV数の上限とか書いてあるが、実際は関係なく使えるらしいｗ
今回はスマートフォン用のサイトにだけ埋め込んでみた。見た目はこんな感じだ！
左が導入前、右がモリサワフォントの「Shin Maru Go Regular JIS2004」を導入したもの。
丸めのフォントで、くどい感じも無く結構いいんじゃないかと思う。若干Boldがわかりづらい点が気になる。
実際に、「クラウドフォント」を導入してみて「あれっ？」と思ったことがある。
それは、読み込み時間について。Webフォントはサーバー上にフォントがあるため、通常より読み込みが遅いのは知っていた。
しかし、「クラウドフォント」になるとそれが顕著に目立つ。というか時差が気になった。
だって記事自体は自分のサーバーから読み込んでるのに、フォントは「モリサワ」さんの所から引っ張ってきているから。
なので、少しのタイムラグがあり、自分のデバイスのフォントが一瞬表示されてから、後から「クラウドフォント」に切り替わるのが目に見てわかる。仕方ないのかな？
簡単に動画を撮ってみました。
導入は結構簡単で、
１．会員登録
こちらより会員登録できます。無料です。
ご利用申込み | TypeSquare [タイプスクウェア]
２．サイト登録をして、Scriptを＜head＞内に記述
このScriptは個々で違ってくるので、会員ページの導入方法を参照してください。
３．好きな「クラウドフォント」をCSSに記述（普通に記述して問題ないです）
記述例
body{
font-family:'Shin Maru Go Regular JIS2004' ;
}
終わり。
やっぱりフォントの老舗である「モリサワ」さんのフォントは見やすいです。「クラウドフォント」の代償である読み込みの遅延時間さえ気にならなければ良いと思いますよ。
どうやら、Androidでは表示できないみたい。なんでだろう。僕の環境が悪いのかもしれません。ちょっと検証不足です。とりあえずGNとOpptimusLTEでは確認できませんでした。Android4.0のモトヤフォントが適用されちゃってます。
iPhoneのSafariでの表示は問題ないのですが、アプリ等に埋め込まれたWebViewでは表示できませんでした・・・。左がTweetList、右がFacebookです。
以上です。
まぁ、個人的には気に入っているのでいいです。今年の年末までですがいつまでコレを使うかな。
[Å] Webフォント使用！スマホ版の本文を「可愛いフォント」に変更したよ | あかめ女子のwebメモ
Webフォントが楽しい！Webフォントの探し方と使い方・設置の仕方などなど。 | norirow’s Diary
