モリサワウェブフォント「Typesquare」をいれてみた

最近何かと話題のウェブフォント。先日、九州大学のキャンパスで開催されたdotFes2014にてモリサワさんのTypesquareを知り、無料版(書体数1、適用ドメイン数1、PV数が1万 PV / 月のプラン)を試してみることに。

選べる書体はたっくさん。でも、1ウェイト(太さ)で1カウントです。
たとえば「ゴシックMB101」というフォントを使いたい場合に、選択できるウェイトが「L、R、M、DB、B、H、U」のように何種類もあります。その中のどれか1つ、で1書体となります。

つまり、1つのフォントを見出しと本文に使いたい場合、2書体必要になるんです!ご注意ください〜。

ウェブフォントって、表示が遅いんじゃないか、とかなんか難しそう・・・みたいな不安要素が結構あると思うんですが、意外と簡単に導入できるし、Typesquareのようなクラウドフォントならサーバー上にあるフォントファイルの中から、必要な物だけ落としてくるので表示が遅いこともありません!
ただ本格的に企業サイトなどでいいフォントを使おうとすると、PV数も考えなくちゃいけないし、無料版ではとうてい無理wそれなりにコストはかかります。

Typesquareの他にも無料で導入できるようなウェブフォントのサービスはたくさんあるので、そちらも試してみるといいかもしれません。


1.新規登録

Typesquareサイトで、左側にある「新規登録(無料)」から登録フォームへ。

https://typesquare.com/
TypeSquare  タイプスクウェア

登録フォームに、必要事項を入力します。メールアドレスはちゃんとメールが受け取れるアドレスにしてくださいね。最後にメールで送られてくるURLにアクセスをして登録完了となります。


2.書体を登録

登録が完了し、ログインをしたらプランの設定を行います。マイページの左側のメニュー「プラン・オプション設定」から設定を行うプランの「確認・編集」ボタンをクリックしてください。

プラン設定詳細ページの下の方にある「利用書体一覧」から書体を登録します。

shotai

使用したい書体を1つ選んで決定ボタンを押してください。

sentaku


3.利用サイト登録

次に、書体登録の下にある「利用サイト登録」を行います。

saitourl

URLを入力したら、「変更内容を確認」ボタンをクリック。保存をしてください。


4.サイトに反映する

書体と利用サイトの登録が完了したら、いよいよサイトの方に反映します。

まずはプラン設定詳細ページにあるプラン専用タグをコピーし、head内に貼り付けます。

plantag

次に、その書体を適用したい項目にcssを記述します。font名は「利用書体一覧」に書いてあるので、コピーしてください。

fontmei

“または”と書いてあるのでどちらかで結構です。

cssrei


以上で設定は完了です!
利用サイトに登録しているドメイン上でないと反映されないので、ローカルと比較してみると違いがわかると思います。

公式サイトにも詳しい導入方法のページがありますので、こちらも参考にしてみてください。
詳しい導入方法

ご質問や、「いや、これは違うよwww」みたいなのがありましたらコメントくださいm(_ _)m

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA