新@kyotapyな日々

思いついたら書く… wordpress,iPad,美味しいもの,観光

モリサワのwebフォントTypeSquareを使ってみました

      2016/01/13

STINGER5を使っていた時に試してみたwebフォント。結局、表示速度が遅くなりすぎて断念しました。

今回、モリサワのwebフォントTypeSquareを使ってみたら手軽で速度も問題なさそうなので紹介します。

充実のフォント数

英字のwebフォントは沢山ありますが、日本語のwebフォントとなるとフォント数が限られてきます。そんな中、Typesquareでは太さの違いも含めると700個以上のフォントが使えます。

700以上のフォントを簡単に試せる

フォントが700個以上もあると自分のサイトにはどんなフォントが似合うのか迷うところですが、TypeSquareでは"トライアウト"というページで自分のサイトにwebフォントを適用させて見ることができます。

見出し、本文と別に指定できるし、指定内容を3つまで保存できます。

月間1万PVまで無料

スタンダード無料プランでは、1つの書体、1つのドメインに限られますが、月間1万PVまでなら無料でつかえます。1万PVを超えると通常のフォントに戻ります。ちょっとした個人ブログなら十分ですね。

ユーザ登録、使用書体等の登録

まずはユーザ登録をします。住所、氏名、電話番号など結構詳しく入力が求められます。

ユーザ登録後、ログインして無料のプランを新規登録。プランの編集画面の下部に使用したい書体と書体を使用するサイトのURLを入力して保存します。@kyotapyは"新ゴR"というゴシック体にしました。

サイト側の設定

あとはサイト側の設定。

プランの編集画面の上部に"プラン専用タグ"があります。その下に"URLオプション"というものが設定できます。今回は、"フェードインあり"を選択しました。これはwebフォントを適用させる時の画面のちらつきをなくすため、文字が浮き上がってくるように表示させるもの。

"URLオプション"の選択によって、"プラン専用タグ"が変化します。

この"プラン専用タグ"をAffinger2の親テーマのheader.phpのheadタグ内に貼り付けます。@kyotapyは、スタイルシートの読み込みコードの下に貼り付けました。

最後に子テーマのstyle.cssにフォントの設定を追記します。

上記の"新ゴ R"が今回登録したフォント。月間1万PVを超えたら、ブラウザの環境によって、次に指定したフォントが適用されていきます。

webフォント適用完了

サイトを確認してみると無事に指定したwebフォントが適用されていました。

表示スピードも特に問題ないようです、フェードインオプションのおかげで文字表示が遅くなっても演出のように見えるせいかもしれません。無料でこれだけ手軽にwebフォントが使えるのは、とてもいいサービスだと思います。

TypeSquareオススメです!

 - wordpress, テーマ , , ,