最近何かと話題のウェブフォント。先日、九州大学のキャンパスで開催された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の他にも無料で導入できるようなウェブフォントのサービスはたくさんあるので、そちらも試してみるといいかもしれません。
新規登録
Typesquareサイトで、左側にある「新規登録(無料)」から登録フォームへ。
登録フォームに、必要事項を入力します。メールアドレスはちゃんとメールが受け取れるアドレスにしてくださいね。最後にメールで送られてくるURLにアクセスをして登録完了となります。
書体を登録
登録が完了し、ログインをしたらプランの設定を行います。マイページの左側のメニュー「プラン・オプション設定」から設定を行うプランの「確認・編集」ボタンをクリックしてください。
プラン設定詳細ページの下の方にある「利用書体一覧」から書体を登録します。
使用したい書体を1つ選んで決定ボタンを押してください。
利用サイト登録
次に、書体登録の下にある「利用サイト登録」を行います。
URLを入力したら、「変更内容を確認」ボタンをクリック。保存をしてください。
サイトに反映する
書体と利用サイトの登録が完了したら、いよいよサイトの方に反映します。
まずはプラン設定詳細ページにあるプラン専用タグをコピーし、head内に貼り付けます。
次に、その書体を適用したい項目にcssを記述します。font名は「利用書体一覧」に書いてあるので、コピーしてください。
“または”と書いてあるのでどちらかで結構です。
以上で設定は完了です!
利用サイトに登録しているドメイン上でないと反映されないので、ローカルと比較してみると違いがわかると思います。
公式サイトにも詳しい導入方法のページがありますので、こちらも参考にしてみてください。
詳しい導入方法
ご質問や、「いや、これは違うよwww」みたいなのがありましたらコメントくださいm(_ _)m