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

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

関連記事

Web

URLリダイレクトの動作

URLリダイレクトの動きについて説明します。

Web

Screen Wake Lock API を使って、ディスプレイをスリープさせないWebページを作る

Screen Wake Lock API を使ったサンプルページを作りました。

Web

Icons8 の Free Icons を使う手順

Icons8 の Free Icons Icons8 というサイトでは、いろいろな種類の無料素材が提供されています。 今回、そのうちの1つである「アイコン(Free Icons)」を使う手順についての …

Web

Webサイトに使用されている色のコントラストをチェックする

目次1. はじめに2. Webコンテンツで推奨されるコントラスト比3. コントラスト比をチェックすることができるサービス4. コントラスト比の問題を自動的に検知する 1. はじめに 本ページでは、We …

Glitch

Glitch に DokiWiki を設置しようとして失敗しました

Glitch に DokuWiki を設置しようとしたのですが、残念ながら失敗してしまいました。ここにその記録を残しておこうと思います。