1. はじめに
自分のWebページに、TypeSquare [タイプスクウェア] というWebフォントサービスを導入する手順について説明します。
無料プランもあるので、ちょっとカッコいいフォントを使ってみたい場合に試してみるとよいでしょう。
(TypeSquareとは?より引用)
2. TypeSquare とは?
書体メーカーである「モリサワ」が提供しているWebフォントサービスです。
いろいろなプランがあります。
- スタンダードプラン
- セルフホスティングプラン
- アドバンスドプラン
- MORISAWA PASSPORTプラン
このうち無料プランが含まれているのは、スタンダードプランのみなのですが、このスタンダードプランは、以下の 2つのステップで手軽に Webフォントを利用することができるプランになっています。
-
script
タグを追加 - CSS で
font-family
を追加
以下の表から分かるように、利用できる書体が1つだったり、対象ドメインが1つだったりといった制約があります。
本ページでは、スタンダードの無料プランを導入する手順について説明します。
※ レンタルサーバーでは、この TypeSquare を使った Webフォント無料サービスがついていることがあります。
3. TypeSquare の導入手順
スタンダード無料プランの導入手順は以下となります。
(1) ご利用申込み ページからアカウントを登録します。
(2) TypeSquare サイトにログインします。
(3) 「プラン設定詳細」ページ を開きます。
「プラン設定詳細」ページ を開くには、マイページトップ上の「現在ご利用中のプラン」に表示されている「無料プラン・無料プラン」リンクをクリックします。
(4)「プラン設定詳細」ページで、「利用する書体」を登録します。
(5) 同じく「プラン設定詳細」ページで、「そのフォントを利用するサイトのURL」 を登録します。
(6) 「プラン設定詳細」ページ内の「プラン専用タグ」に表示されている script
タグを、そのフォントを利用したいWebページの head
タグ内に記述します。
(7) HTML上のそのフォントを適用したい箇所に対して、CSS で font-family
を記述します。
(例) フォント「ぶらっしゅ」を、body
タグに対して指定する場合
body {
font-family: "Brush-U";
}
4. TypeSquare に関するメモ
- 使用した文字のフォントデータのみがダウンロードされるため、Webページの表示が明らかに遅くなるといったことはありません。
- フォントのデータはブラウザにキャッシュされるので、2回目からのアクセスではフォントのダウンロードは発生しません(サイトの設定にも依存しますが)。
- 「1万 PV / 月」という制限がありますが、これを超えると他のフォント(元のフォント)が適用されます。適用したいフォントで表示されることが重要なページであれば有料プランを使いましょう。
5. TypeSquare を利用したみた感想
「無料プラン」に関する感想ですが、普段使わないフォントをアクセントとして使ってみたい場合にピッタリのサービスだと思いました。使っている文字のフォントデータしかダウンロードされないのがすごく良いです。
6. デモページ
以下のページでは、本ページと同じようなことを書いていますが、実際に TypeSquare を使った表示も行っています。
デモページ
? TypeSquare を使ってみる