about

sogo  
fukidasi

  social

Count per Day

  • 4065現在の記事:
  • 437今日の閲覧数:
  • 4現在オンライン中の人数:

日本語WebフォントTypeSquareサービスがスタートしたので実装してみた



※当Webフォントの無料サービスが、2013年12月いっぱいまでサービス延長となりました。

時代は今やWebフォントと言わんばかりに普及しつつもありますが、まだまだ日本語に関しては発展途上の一途でもあり、現在でも日本語フォントを提供しているサービスはありますが、その殆どは無料ゆえの制限があったり高価なものだったりとイマイチ導入する事に躊躇してきました。

そんな中、今月22日より新規クラウドフォントサービス「TypeSquare」がOPENし、オープン記念¥0キャンペーンと銘打って年内12/31いっぱいは制限なしの無料で使えるという嬉しいサービスがスタートしました。Webフォントに前々から興味をもっていた私にとってはラッキーです!


クラウドフォントサービス「TypeSquare」の導入方法


オープン記念¥0Webフォント「TypeSquare」の導入までの流れと方法をまとめてみました。


会員登録

クラウドフォントサービス「TypeSquare」を利用する上では当たり前ですが会員登録(利用登録)が必要となりますので、TypeSquareのトップページ右上から利用登録を行います。




とりあえず無料で使ってみる場合は「オープン記念¥0キャンペーン」を選択します。



利用規約に同意し「基本情報を入力」すると会員登録が完了し、ここで登録したメールアドレスとパスワードが今後のログインIDとなりますので、忘れずにメモしておきましょう。


Webフォントの導入方法

1. 事前に登録したID(メールアドレス)とパスワードでログインします。

2. マイページ→左サイドのメニュー内「サイト登録」→「新規利用サイト登録」へ進みます。




3. 以下のようなタグが発行されますので、ご自身のサイトの header内に記述します。


設置参考例 (*個々によりコードは違いますのでコピーはしないように)
<head>~</head>の間に

<script type="text/javascript" src="http://typesquare.com/accessor/script/typesquare.js?j○○○3D" charset="utf-8"></script>
</head>
<body>

4. メニュー内の「フォント一覧」からお好みのフォントを見つけますが、よくある無料プラン限定といった制限はありませんので、全フォントスタイル189種類(2/23時点)から選べます。



スタイルシート(CSS)への記述

「TypeSquare」ではフォントを適用する際によくある@font-faceを使った指定方法ではなく、既存のfont-styleと置き換える方法を用いていますので楽かと思います。

好みのフォントが見つかったらCSSで適用させるのですが、body全体のフォントを変えるか一部のフォントのみを変えるかはお好みとなりますが事例として、

一部のフォントのみを変える場合(例:h1タイトル)ですと

h1 title {
	font-family:"フォーク B";  /* 好みのフォントスタイル */
}

という感じで問題ないと思いますが、body全体を変える場合ですと、万が一、最悪TypeSquareサーバーが不調だった場合の事を考慮すると、


h1 title {
	font-family: "フォーク B", "メイリオ", Meiryo, Verdana, "MS Pゴシック", sans-serif;
}

といった感じで、優先順位を付けたうえで複数指定しておくほうが保険の意味でも良いのではないかと私は思いますが、個々において判断して下さい。


はい、たったこれだけの手順で簡単にWebフォント化が完了です!

当ブログの各記事タイトル部分も”フォーク B”を用いてWebフォント化してありますので、描写具合などの参考にして下さい。



実際にWebフォント「TypeSquare」使ってみての感想

今まで何度か、Webフォントサービスを利用した事がありますが、今回の「TypeSquare」に関して言えば、Webフォントゆえの切り替えによる時間差はあるものの、特段、描写による表示速度遅延の問題も無いようで快適に利用できると思います。

期限付きとはなりますが、「無料で利用できるフォントはこれだけですよ」とかの制限も無い上に、189種類ものスタイルから選択出来かつ、無料期間中においてはPV(ページビュー)制限も無いという事ですので、お得感満載で個人的には大満足です!

無料期限までは有効に使わせていただき、その後については追々考えていこうと思います。




Pocket

Trackback URL


この記事を共有していただければ嬉しく思います。コメントもお待ちしておりますのでお気軽にどうぞ!
※ドメインを移行しましたら共有数が0にリセットされてしまいましたので、ご協力お願い致します。