TypeSquare の導入手順

1. はじめに

自分のWebページに、TypeSquare [タイプスクウェア] というWebフォントサービスを導入する手順について説明します。

無料プランもあるので、ちょっとカッコいいフォントを使ってみたい場合に試してみるとよいでしょう。

書体メーカーである「モリサワ」が提供しているWebフォントサービスです。

いろいろなプランがあります。

このうち無料プランが含まれているのは、スタンダードプランのみなのですが、このスタンダードプランは、以下の 2つのステップで手軽に Webフォントを利用することができるプランになっています。

以下の表から分かるように、利用できる書体が1つだったり、対象ドメインが1つだったりといった制約があります。

本ページでは、スタンダードの無料プランを導入する手順について説明します。

※ レンタルサーバーでは、この TypeSquare を使った Webフォント無料サービスがついていることがあります。

スタンダード無料プランの導入手順は以下となります。

(1) ご利用申込みページからアカウントを登録します。

(2) TypeSquare サイトにログインします。

(3) 「プラン設定詳細」ページを開きます。

「プラン設定詳細」ページを開くには、マイページトップ上の「現在ご利用中のプラン」に表示されている「無料プラン・無料プラン」リンクをクリックします。

(4)「プラン設定詳細」ページで、「利用する書体」を登録します。

(5) 同じく「プラン設定詳細」ページで、「そのフォントを利用するサイトのURL」を登録します。

(6) 「プラン設定詳細」ページ内の「プラン専用タグ」に表示されている scriptタグを、そのフォントを利用したいWebページの head タグ内に記述します。

(7) HTML上のそのフォントを適用したい箇所に対して、CSS で font-family を記述します。

(例) フォント「ぶらっしゅ」を、body タグに対して指定する場合

body {
  font-family: "Brush-U";
}

使用した文字のフォントデータのみがダウンロードされるため、Webページの表示が明らかに遅くなるといったことはありません。
フォントのデータはブラウザにキャッシュされるので、2回目からのアクセスではフォントのダウンロードは発生しません（サイトの設定にも依存しますが）。
「1万 PV / 月」という制限がありますが、これを超えると他のフォント（元のフォント）が適用されます。適用したいフォントで表示されることが重要なページであれば有料プランを使いましょう。

「無料プラン」に関する感想ですが、普段使わないフォントをアクセントとして使ってみたい場合にピッタリのサービスだと思いました。使っている文字のフォントデータしかダウンロードされないのがすごく良いです。

以下のページでは、本ページと同じようなことを書いていますが、実際に TypeSquare を使った表示も行っています。

デモページ