WEBフォントとは何ですか？
サイトを閲覧する際、パソコンにインストールされているフォント以外は使用できないため、独自のフォントをCSSで指定するだけではきちんと表示されません。
サイト上でオリジナルのフォントを使用するには、閲覧者のPC環境でもそのフォントがインストールされている必要があるため、デフォルトでインストールされている標準的なフォント以外はCSSで指定しないのが一般的です。
そのため、サイト上でオリジナルの美しいフォントを使いたい場合には、画像に直接文字を書いてどのような閲覧環境でも同じように表示させるのが一般的です。サイトのロゴやタイトルバナーなどではこの方法がとられることが多く、Yahoo!やGoogle、あるいは企業サイトのロゴなどもたいていは画像で作成されています。
例えば、画像に直接テキストを記入した場合はこのようになります。
けれども、このように画像で文字を表示させてしまうと検索エンジンのロボットには何が書かれているのかが分からないため、SEO対策上のデメリットがあり、アクセスアップの面では不利と言われています。
■WEBフォントはSEO対策に有利
そのような時、WEBフォントを利用すれば、サーバー上にアップロードしたフォントを利用できるため、訪問者の閲覧環境に依存せずに意図したフォントを「テキスト」のままで表示させることができます。
・「画像に直接記入」 → 画像なので検索エンジンが読めない
・「WEBフォント」 → テキストなので検索エンジンでも読める、SEO対策に有利
また、ロゴやタイトルだけでなく、コンテンツの文章全体にもオリジナルのフォントで表示できるメリットがあります。
このWEBフォントの実際の使い方についてですが、サーバー上に使いたいフォントをアップロードしたのち、CSSに「@font-face」を設定して使用することができます。
→ CSSでWEBフォントを指定する方法
フォントの容量が大きいと表示に遅延が生じるなどのデメリットもありますが、同じように表示されるなら画像よりもWEBフォントの方がメリットが多いといえるでしょう。
一般的なWEBフォントの拡張子は「.woff」や「.woff2」
このWEBフォントを利用する際、一般的にはMozillaが中心となって開発したWOFF (Web Open Font Format) 形式のフォントを使用します。このWOFFファイルの拡張子は「.woff」です。
また、最近はWOFFよりも圧縮率の高い「WOFF2」形式の「.woff2」に移行されつつあります。たいていのブラウザではほぼ対応しているため、今後はWOFF2形式を使用するとよいでしょう。
一方、「.otf」や「.ttf」などのフォントファイルもありますが、これらは主にパソコンにインストールして使うフォントになります。
コントロールパネルで「フォント」の箇所を開くと、パソコンにインストールされている標準的なフォントの一覧を確認することができますが、プロパティを確認すると「.otf」や「.ttf」などの拡張子が付いています。
「OpenType」はマイクロソフトとアドビシステムズによる共同開発、「TrueType」はアップルコンピュータの開発によるものです。また「.TTF」は単体ですが、「.TTC」は複数のフォントファイルが格納されたコレクションタイプといった違いがあります。
- OpenType フォント ファイル (.otf)
- TrueType フォント ファイル (.TTF)
- TrueType コレクション フォント ファイル (.TTC)
これらのパソコンのフォントファイルに対し、「.woff」はフォントデータが圧縮されているため、読み込み時間が短縮されるなどのメリットがあります。
そのため、「.otf」や「.ttf」などを「.woff」や「.woff2」に変換したのち、サーバーにアップロードして使用することをおすすめします。WOFFコンバータなど、変換するための無料ツールがネット上で公開されていますので、それらを使用して変換するとよいでしょう。
日本語フォントのサブセット化でファイル容量を削減
上記のようにメリットが多いWEBフォントですが、日本語のサイトではあまり使用されていません。
英語はアルファベットのため、せいぜい26文字かそこらしかありませんが、日本語は漢字やひらがな、カタカナなどもあり、フォントのファイル容量が膨大になりがちです。そのため、日本語のサイトでWEBフォントを利用するには適していないと言われています。
例えば、Google Noto Fontsでも英語は「16MB」となっているのに対し、日本語は「115MB」程度もあるため日本語フォントは容量はかなり大きいです。
転送量が大きくなることで読み込みの遅延が生じるデメリットがありますし、フォントの著作権によっては費用もかかるため日本ではあまり普及していません。
■サブセット化とは？
もし日本語のサイトでウェブフォントを利用する場合、必要なフォントのみを抜き出して使うと容量を削減することができます。全てが入ったフルセットのウェブフォントはファイル容量が大きいですが、サイト内で使用するフォントのみをのみを抜き出してサブセット化することにより、容量を削減することができます。
当サイトの「ホームページの作り方」のタイトル部分についても、この10文字のみを抜き出してサブセット化しているため、ファイル容量を削減して使用しています。
ファイルの中身はこちらのサイトなどで確認することができますが、デフォルトの格納文字はこのように数が多いです。
ここから必要な文字だけを抜き出してサブセット化して当サイトでは使用しています。
そのため、仮にサイト全体にWEBフォントを指定したとしても、この「ホ」や「ー」、「ム」などの10文字以外はデフォルトのフォントで表示されることになります。
もしロゴなどの一部の箇所だけではなく、サイトのコンテンツ全体で使用する際には、ひらがなやカタカナ、常用漢字などの一式をサブセット化して使用されるとよいでしょう。
このサブセット化する際のツールはサブセットフォントメーカーがおすすめですが、ネット上でフリーソフトがいくつか公開されていますので、容量を削減してから使用することをおすすめします。
Google Fontsの使い方
英語サイトでWEBフォントを簡単に使用する際にはGoogle Fontsを利用するのが便利です。
日本語フォントの場合、サブセット化しないと容量が多くて微妙ですが、アルファベットや数字のみの英語ならフルセットで使用してもそれほど気にはならないかと思います。
外部CSSを利用する形にはなりますが、上記のように自分でフォントファイルをサーバーにアップロードする必要がなく、HTML側でグーグルフォントの外部CSSを指定し、CSS側で使いたいfont-familyを指定するだけで簡単に利用することができます。
使いたいフォントを選び、「Quick-use」の箇所をクリックすると詳細が表示されます。
１番目と2番目の箇所でboldなどの使用するタイプを選択しますが、選びすぎるとサイトの表示が重くなります。右側にメーターが表示されていますので参考にするとよいでしょう。
３番目に外部CSSの箇所を指定するhtmlタグが表示されますので、そのフォントを使いたい全てのページのhtmlファイルのheadタグ内に貼り付けます。
４番目にfont-familyが表示されていますので、こちらは元からあるCSS側で使いたい箇所に指定します。
順番としては元からあるCSSよりも、グーグルフォントの外部CSSが先に読み込まれるようにした方がよいと思いますが、どちらでもきちんと表示されていました。英語サイトを構築する場合や、サイトロゴをアルファベットで記述している場合は使ってみるとよいかもしれません。
モリサワのWebフォントサービス「TypeSquare」
最近では上記のGoogleフォントにも日本語フォントが登場してきましたが、英語フォントと比較するとまだ数は少ない印象があります。
その点、美しい書体で定評のある老舗メーカーの「モリサワ」なら日本語のWEBフォントが充実しています。モリサワのWEBフォントサービスには「TypeSquare」がありますが、「スタンダードプラン」なら無料でも利用することができます。
概ね、WordPressなどのCMSを利用している場合は「スタンダードプラン」を利用している人が多いのかもしれません。「TypeSquare」公式サイトのスタンダードプランの場合、「月1万ページビュー」や「1ドメイン」までといった制限はありますが、無料でも利用することができます。
一方、エックスサーバーやシックスコアでは、このモリサワのWEBフォントを「月間7.5万PV」まで、利用可能ドメイン数が「3ドメイン」まで無料で利用できます。また、さくらインターネットの「スタンダードプラン」以上でも同様に利用することができます。
モリサワのWEBフォントを検討する際、上記のレンタルサーバーについても検討されてみるとよいでしょう。
■公式サイトのセルフホスティングプラン
公式サイトの「セルフホスティングプラン」では、あらかじめ必要な文字をサブセット化して使用することもできます。
サイトのHTMLとCSSを圧縮してアップロードすると、必要なフォントのみでサブセット化されたデータが作成されます。そのデータをサーバにアップロードして使用すれば、フォントの表示の遅延などのデメリットは解消されるかもしれません。
ただ、スタンダードプランでも「サイト内に必要な文字が自動検知され」とありますので、これがサブセット化されて配信される意味なのかは不明ですが、表示の速さについてはそれほど大きな違いはないものと思います。
当サイトでご紹介しているような、HTMLとCSSで静的なホームページを作成している場合には「セルフホスティングプラン」もメリットがあるかもしれませんが、サイトを更新するたびにサブセット化しなおす必要があるため、こちらは更新頻度の少ないサイト向けかもしれません。
■Adobe Fontsはどうなのか？
そのほか、アドビにもWEBフォント「Typekit」があります。当サイト運営者は使用したことがないため詳細は不明ですが、チェックされてみるとよいでしょう。