Web

TypeSquare の導入手順

投稿日:2019年6月20日 更新日:

1. はじめに

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

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

使えるフォントの一部
TypeSquareとは?より引用)

2. TypeSquare とは?

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

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

  • スタンダードプラン
  • セルフホスティングプラン
  • アドバンスドプラン
  • MORISAWA PASSPORTプラン

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

  1. script タグを追加
  2. 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 を使ってみる

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

DokuWiki

DokuWiki Wrapプラグインの使い方

DokuWiki を使う上で、外せない Wrapプラグイン の使い方について書きます。 目次1. DokuWiki の Wrapプラグインとは?2. 基本的な使い方<div> タグと&lt …

Web Vitals

Chrome UX Report API を使う手順 (cURL の場合)

Chrome UX Report API を使う手順 (cURL の場合)を紹介します。

Chrome

誤って Chrome を閉じた後で、さっきまで開いていたページを開く

誤って Chrome を閉じた後で、さっき開いていたページを開く方法を紹介します。

Web

Webページ中の特定の文字列をURLで指定する(Text Fragments)

Webページ中の特定の文字列をURLで指定する Text Fragments について説明します。

Google

Google マップ (Google Maps) で緯度経度を指定して場所を見つける方法

例えば「北緯35度40分57秒 東経139度45分10秒」という情報があった場合に、それがどこなのか調べるには Google マップ を利用することができます。では、どうやればよいのでしょうか? 実は …