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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ただ今、本ウェブサイトを改造しています

現在、このウェブサイトを改造しています。 今回、WordPress の「Attitude」というテーマを使ってみたのですが、評判が良いだけあって使いやすいです。デザインがすっきりしていてシンプルなのも …

Web

ウェブブラウザがページを取得して表示するまでの流れ

目次1. はじめに2. Chrome デベロッパーツールの [Network]パネル3. リソース毎の処理の流れ4. その後の流れ5. DOMContentLoaded と load イベント6. グ …

Web

Firefox で複数のプロファイルを使い分ける方法

目次1. Firefox のプロファイルについて2. プロファイルによって管理できるもの3. プロファイルの場所プロファイルの場所の確認方法4. プロファイルマネージャープロファイルマネージャーの起動 …

Web

Cookie使用の同意を求めるポップアップを表示する (Cookie Consent by Osano)

Cookie Consent by Osano の使い方について説明します。

Web

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …