TypeSquare を使ってみる

1. このページの目的

TypeSquare [タイプスクウェア] のWebフォントをこのページに適用します。

2. TypeSquare とは？

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

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

3. TypeSquare の導入手順（スタンダードの無料プラン）

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

  1. ご利用申込み ページからアカウントを登録します。
  2. TypeSquare サイトにログインします。
  3. 「プラン設定詳細」ページで、「利用する書体」と「そのフォントを利用するサイトのURL」を登録します。
  4. 「プラン設定詳細」ページ内の「プラン専用タグ」に表示されている scriptタグを、そのフォントを利用したいWebページの head タグ内に記述します。
  1. HTML上のそのフォントを適用したい箇所に対して、CSS で font-family を記述します。

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

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

4. 実際に TypeSquare のフォントを適用してみる

以下の枠内に、フォント「ぶらっしゅ」を適用してみます。

ここに引用した文字に、TypeSquare のフォントが適用させます。

以下、「私の個人主義（夏目漱石）」より引用

私はせっかくのご招待だから今日まかり出て、できるだけ個人の生涯を送らるべきあなたがたに個人主義の必要を説きました。これはあなたがたが世の中へ出られた後、幾分かご参考になるだろうと思うからであります。はたして私のいう事が、あなた方に通じたかどうか、私には分りませんが、もし私の意味に不明のところがあるとすれば、それは私の言い方が足りないか、または悪いかだろうと思います。で私の云うところに、もし曖昧《あいまい》の点があるなら、好い加減にきめないで、私の宅までおいで下さい。できるだけはいつでも説明するつもりでありますから。またそうした手数を尽さないでも、私の本意が充分《じゅうぶん》ご会得になったなら、私の満足はこれに越した事はありません。あまり時間が長くなりますからこれでご免を蒙ります。

以下の文章も追加して、ダウンロードされるフォントファイルのサイズが変わるか調べる。

以下、「春と修羅（宮沢賢治）」より引用

わたくしといふ現象は
仮定された有機交流電燈の
ひとつの青い照明です
（あらゆる透明な幽霊の複合体）
風景やみんなといつしよに
せはしくせはしく明滅しながら
いかにもたしかにともりつづける
因果交流電燈の
ひとつの青い照明です
（ひかりはたもち　その電燈は失はれ）


これらは二十二箇月の
過去とかんずる方角から
紙と鉱質インクをつらね
（すべてわたくしと明滅し
　みんなが同時に感ずるもの）
ここまでたもちつゞけられた
かげとひかりのひとくさりづつ
そのとほりの心象スケツチです

5. メモ