どうも、鳥取の星ことkuroro0319です。

かつてはWebサイトのフォントはデフォルトフォントしか使えなかったので、見出しは画像で、本文は明朝かゴシックかを選択するくらいの感じでした。
ということもあり、そもそも細かい本文組のデザインは諦めるしかないって感じでした。

ある人曰く、「Webサイトのフォントは汚いもの」

他のある人曰く、「Windowsはフォントが汚いのでクソ！」

さらに他のある人曰く、「鳥取ってどこ？」

最後のはわけわからないですね。

「岡山県の上です。」
答えんのかい！

それは置いといて、WindowsはWindows10以前はアンチエイリアスが効いていなかったので、それはそれはひどいものでした。
未だに色々と思うことは多いですが、ただのWindowsに対する罵詈雑言になってしまうので、割愛します。

で、本筋なのですが、Webフォントって使ってますか？

私は案件ではここ数年で数回使っています。

数える程しかないですね。

思ってるより、導入のハードルが高いみたいです。

勝手に導入してもいい気はするけど…

Webフォントって何？

それでは、ここ2〜3年流行ってきているWebフォントについて調べましょう。

デザインをやってる方ならわかると思いますが、フォントってPCなどのデバイスにもともと入っているもの以外は基本的に有料なんです。
何故かというと、フォントが結構な時間をかけてデザインされたものだからです。
しかも、日本語は常用文字だけで2000文字くらいあるので、フォントを作るのも非常に大変です。
ということで、結構な高額商品になります。
これはもうしょうがないとしか言いようがありません。

デザインやってる人の税金みたいなもんです。

あぁ、税金払いたくねぇ…

ちなみに、フォントメーカーの有名どころとしてはまず「モリサワ」が真っ先に上げられるでしょう。
この会社を知らなかったら業界ではモグりと疑われます。

ただね…

ここのモリサワパスポートがね…

非常にお高いのですよ。

個人には厳しい存在です。

あとは「フォントワークス」とか「字游工房」、「視覚デザイン研究所」とか「ダイナフォント」とかですかね。

で、そんなお高いフォントをWeb上でも使えるようにしたのがWebフォントなんですが、なんとWebサーバー上にフォントを上げたら使えたりしちゃいます。

でも、それはしない方がいいでしょう。

何故かというと、フォントにも使用範囲が決まっているのと、Web上の誰でも見れる場所に置いてしまうと、みんながダウンロードできてしまうからです。

結構なお値段で売ってるものをタダで配ってる人がいたら、アホかと！

わしらを殺す気かと！

という感じで、フォント業者に睨まれてしまうので、フォントが再配布されないような仕組みを使ったり、無料で使えるフォントを使ったりということをしないといけません。

それらの厳しい条件をクリアしたのが、Webフォントサービスということになります。

著作権はちゃんと守ろうということです。

Webフォントサービスって？

Webフォントサービスは色々あります。
有名どころだと「FONTPLUS」があります。
ここはいろんなフォントメーカーのものが使えるのでとてもおすすめです。

他にはモリサワがやっている「TypeSquare」もあります。
モリサワパスポートを持っていると特典があるので、使いやすいと思います。

それから、忘れてはいけないのが「Google Fonts」です。
無料で使えるのが嬉しいところです。
さすがGoogle様！神です！
最近は日本語も結構増えたみたいですね。

そして、最後に今回紹介する「Typekit」です。
今回は何故こちらを紹介するかというと、このサービスはAdobeが運営していて、Creative Cloudを使っている人だと導入がとても簡単だからです。

ちなみに、Webフォントサービスはほとんどが月（年）額制で、ページビュー数によって値段が変わってきます。
集客が多ければ多いほど、値段が高くなります。
あとはAPIからどのようにフォントを読み込むかなどの細かい設定もできるので、どのWebフォントサービスがいいかは色々と試してみてください。

Typekitの使い方

まずは「Typekit」のサイトに行きましょう。
AdobeのCreative Cloudを使ってる前提で書いていきますので、もし使っていなかったらAdobeの公式サイトから申し込んでみてください。

サイトに行ったら、まずはログインしてください。

そして、好きなフォントを選びます。

「キットに追加」ボタンを押します。

もうあとは為すがままにポップアップに身を任せてください。

ポップアップブロックが動いたら、ちゃんと解除しましょう！

解除できない？？

やれやれだぜ…

使うんじゃねぇ！！

という茶番は置いといて、使用するドメインを設定して、「公開」ボタンを押して、書いてある通りにclassを設定したりしたら無事使用できます！

いや〜実に簡単です。

デザインとフォントを合わせるのも簡単なので、まずはポートフォリオサイトとかに導入してみてください。

お客さんに登録してもらう場合は、ビジネスプランに登録してもらうのがいいかもですね。

Typekitを使ってみての感想

AdobeのCreativeCloudを使ってるので、非常に導入しやすい印象です。
ポートフォリオなどに使うのがいいかなと思ったりしています。
月間PVが500,000を超えなければ、Webサイト数は無制限なので、小規模なサイトなら大丈夫だと思います。
結構なページビュー数だと「FONTPLUS」の方がいいかもしれないですね。
フォント数もかなり多いので…

まぁ、そんなこともありますが、導入ハードルがとても低いのでお試しにやってみてください。

ではでは、良いWebフォントライフを！