Adobeユーザーなら無料でwebフォントを使える神サービス「Typekit」でブログにモリサワフォントを導入してみた!

Let's share!

  • このエントリーをはてなブックマークに追加

写真は撮っているのですが現像の手が全然進まないので、撮影記を書こうにも書けません…!

恐ろしいことにもう6月も終わろうと言うのに、2月に撮った写真の編集もレタッチもまだ終わっていないのです…><

ということで今日は「ブログで使うフォントを自分好みに変えて、気分を盛り上げて行こう作戦!!」をやってみたいと思います!

この記事ではwebフォントとは何なのかということをざっくり説明するところから、実際にAdobe Typekitでブログをモリサワフォントで表示するところまでを書いていきます\(^o^)/

今はブラウザの標準フォントで表示されている当ブログですが、これを別のフォントに置き換えて印象を変えたいと思います(^^♪

備忘録のような記事ですが、短い記事や写真やカメラと関係ない記事は書かない方がいいのかなぁーと勝手に気負ってしまい大きなネタがないと全然記事を書けない(大きなネタは撮影に行くことくらいなので、現像が追い付いていない現状なにも書けない)のを治すためにも、記事にすることにしました^^;

現像と現状で韻を踏んでいるのは偶然です。

※この記事の内容は2017年7月現在のものです。サービスによっては変更があるかもしれません。

スポンサーリンク

webフォントとは?

本題に入る前に、webフォントとは何なのかということについて少しお話したいと思います。

通常のウェブサイトは、見る人のPCやスマホに入っているフォントでしか表示できない

ウェブサイトのどの項目をどのフォントで表示するのかというのは、「スタイルシート」というもので指定します。

例えば、当ブログの記事タイトルをモリサワの「はるひ学園」というフォントで表示したいとすると、スタイルシートに

と書き込みます。

こうすることで、はるひ学園がインストールされているPCでは、当ブログの記事タイトルがはるひ学園で表示されます!

やったー!\(^o^)/

ですが、普通の人はモリサワと契約していないし、当然はるひ学園をPCにインストールしていないので、スタイルシートで指定しても、普通の人のPCやスマホは、はるひ学園を表示することはできません。><

なので、僕がどんなに頑張っても、当ブログの記事タイトルは、ブログを表示しているブラウザの標準フォントで表示されてしまいます(ToT)

ちなみにはるひ学園というのはこんなフォントです。
モリサワの「Typesquare」を契約するとwebフォントとして使えます(^^)/
株式会社モリサワ 書体見本 はるひ学園

そこで登場したのがwebフォント

そこで、表示したいフォントをブログが格納されているサーバーやwebフォントサービスのサーバーからダウンロードするという方法で、見ている人の環境によって表示フォントが変わってしまう問題を解決したのがwebフォントです!

先ほどの例で言うと、僕がモリサワの「Typesquare」というサービスにお金を払うことで、普通の人が持っていない「はるひ学園」をモリサワのサーバーから普通の人のPCやスマホにダウンロードして表示出来るということです!(^o^)

これは素晴らしいことですが、デメリットもあります。

主なデメリットは

  • フォントのデータをダウンロードするので、表示速度が遅くなる場合がある
  • 有料のwebフォントを使う場合、費用がかかる

ということです。

表示速度に関しては、日本語の文字が多すぎるのでフォントのデータが大きくなってしまうのが原因なんですが…(笑)

そこで最近では、ダイナミックサブセット化という、ウェブサイトに使われている文字だけのセット作ることによって、ダウンロードするフォントのデータを小さくする技術が使われています。

例えば、「叔父さん」を「おじさん」と書くことにしているページでは、他の部分で「叔」「父」が使われていなければその文字はダウンロードされません。

この記事では、「叔父さん」と書いてしまったので「叔」も「父」もダウンロードされます。(笑)

「叔父さん」のことは「おじさん」と書いているけど「父さん」も出てくる記事では「叔」はダウンロードされませんが、「父」はダウンロードされる、といった感じです!

この技術があることでwebフォントを使っても問題が出るほど表示が遅くなることはないだろうと踏んで、今回webフォントを使ってみることにしました!(^^♪

どのwebフォントサービスを使う?

今回使うことにしたのはAdobeの「Typekit」

僕は、PhotoshopやLightroomを使うためにAdobe Creative Cloud(以下Adobe CC)のコンプリートプランを契約しています。

Adobe CCには「Typekit」という色々な有料フォントを使うことができるライブラリがあり、Webフォントとして使うことも出来るので、今回はこれを使います!

写真をやっている人がよく利用しているであろうフォトグラフィプランや単体プラン(Adobe Acrobatを除く)でも利用できます。
※フォトグラフィプランの場合は、利用できるフォントが「厳選フォント」に限られ、日本語フォントは5種類しか使えません。

Adobe CCの契約さえあれば追加料金なしというのはいいですね!

僕の好きな「A-OTF リュウミン Pr6N L-KL」というフォントが入っているので、これを使っていきます!

タイトルや見出しなどは「A-OTF 見出ゴMB31 Pr6N MB31」を使います。

Adobe Typekitについての詳細はこちら

Adobe Typekitの内容は?

Adobe CCの契約で使えるのは、Typekitの「ポートフォリオ」というプランです。

  • 欧文フォントを含めて7500個以上の中から100フォントまで使用可能
  • 使用できるサイトは無制限
  • ページビュー数の上限は50万PV/月

となっています。

かなりの人気ブログでもなければ50万PV/月を超えることはないので、僕のブログでは十分すぎます(^^)

数えてみたところ、日本語フォントはモリサワが10ファミリー・10フォント、タイプバンクも同じく10ファミリー・10フォント、Adobeが15ファミリー・67フォントで、合わせて35ファミリー・87フォントありました!

Typekit以外のwebフォントサービスは?

Typekitの以外のWebフォントサービスで有名なところでは、Googleの「Google Fonts」、モリサワとタイプバンクの「TypeSquare」、ソフトバンク・テクノロジーの「FONTPLUS」、ダイナコムウェアの「DynaFont Online」などがあり、併用することもできます。

この中でGoogle Fontsだけは無料ですが、現時点では日本語フォントは早期アクセス扱いで完全にはサポートされていない上、9ファミリー・21フォントしかありません。

M+フォントやはんなり明朝などの魅力的なフォントが入っているので、Adobe CCの契約がなければ使っていたと思いますが。

Google Fonts以外は、1~3フォントしか使えないお試し用みたいなプラン以外は結構お高いので、使ってみたいフォントを見つけるまでは使いません(^^♪

Typekitにないフォントを使いたくなったら、そのときは重課金兵になります…!(笑)

ブログにwebフォントを埋め込む方法

Typekitでリュウミンを使いたいと決まれば、早速ブログにwebフォントを埋め込んでいきます!(^^)/

僕は「Simplicity2」というテーマを、子テーマを使ってカスタムしているので、ここからはその環境を前提として進めていきます。

テーマによってやることがそれほど違うというものではありませんので、参考にはなると思いますが…^^;

WordPressで運用しているブログにwebフォントを埋め込む手順は、

  1. 使いたいフォントをキットに追加する(キットを作成する)
  2. 「Typekit Kit用のJavascriptコード」をウェブサイトのheadタグに書き込む
  3. ほかに使いたいフォントをキットに追加する
  4. キットエディターで各フォントにセレクターを追加するか、CSSを編集する
  5. キットを公開する
  6. ウェブサイトでフォントが適用されているか確認する

という流れです。

キットを作成して、使いたいフォントを追加する

記事がどんどん長くなってしまうので、フォントを探す手順は割愛します。

まず、使用したいフォントのページを開いて「キットに追加」を押します。

すると、まだキットがない場合、上ような画面が出てくるので、「キットを作成」を押してキットを作成していきます。

キットの名前をつけ、webフォントを使いたいサイトのドメインを設定して、続行します。

キットの名前は、あとから見たときになにに使っているキットか分かりやすいように設定するといいと思います。

僕は当ブログ専用のキットとして使っていくつもりなので、「TakuyaPhotos」と名付けました。

「Typekit Kit用のJavascriptコード」をウェブサイトのheadタグに書き込む

先ほどの「続行」の次の画面ですが、このコードをコピーして、Wordpress管理画面>外観>テーマの編集>header-insert.phpに貼り付けます。

もちろんFTPを使ってファイルを直接編集してサーバーにアップロードしても構いません。

あとで分かりやすいように、コメントアウトでTypekit用のコードであることを書いておきました

コードを貼り付けたあと、「続行」を押して次に進もうと思ったのですが、なぜかこの先に進めなかったのでウィンドウを消してしまいました!(笑)

ほかに使いたいフォントをキットに追加する

まず使いたいフォントのページを開き、先ほどと同じように「キットに追加」を押します。

今度は先ほど作ったキットがあるので、「既存のキットに追加」という項目が出来ています。

先ほど作ったキットにフォントを追加したいので、「既存のキットに追加」から「TakuyaPhotos」を選択します。

キットエディターで各フォントにセレクターを追加するか、CSSを編集する

今回は、CSSを編集する方法でフォントを指定していきます。

先ほどの工程が終わると、上のような画面になっているはずです。

文字セットが「ダイナミックサブセット」になっていることを確認して、「CSSでフォントを使用」をクリックします。

すると「CSS内でフォントファミリー名を使用」という画面が出てくるので、このコードをコピーしてCSSの編集に使います。

WordPress管理画面>外観>テーマの編集>スタイルシートを編集していくのですが、僕は見出しを見出しゴ、本文やその他の部分をリュウミンで表示したいので、divセレクタbodyセレクタをリュウミンに指定し、h1からh6までのタグを見出しゴで表示するようにしました。

※2017年7月追記:ページ全体にフォントを適用したい場合、指定するセレクタはdivではなく、bodyでした。

可読性を重視し、codeタグはWindowsではメイリオ、MacではOsakaで表示することにしました。

僕の場合のcssコードはこんな感じです!

キットを公開する

ここまで出来れば、あとはTypekitのページに戻って「公開」を押すだけです!\(^o^)/

ウェブサイトでフォントが適用されているか確認する

最終確認としてウェブサイトのトップページを確認して、フォントがきちんと適用されていれば成功です!

まとめ

このように、webフォントを導入するのはイメージしているよりずっと簡単です。

それに、フォントひとつで見た感じの印象や読みやすさはかなり変わってきますので、webフォント導入を迷っている方も一度導入してみてはいかがでしょうか?

とりあえず見出しゴ+リュウミンの組み合わせにしてみましたが、今後いいフォントを見つけたら変更して色々試して行きたいと思います。

スポンサーリンク

Let's share!

  • このエントリーをはてなブックマークに追加

Please Follow me.