WEBフォントとは何ですか？

サイト上でオリジナルのフォントを使用するには、ユーザーの閲覧環境でもそのフォントがインストールされている必要があります。そのため、パソコンにインストールされている標準的なフォント以外をCSSで指定しても表示されることはありません。

もし、サイトでオリジナルの美しいフォントを使いたい場合、画像に直接文字を書いてどのような閲覧環境でも同じように表示させるのが一般的です。サイトのロゴやタイトルバナーなどではこの方法がとられることが多く、Yahoo!やGoogle、あるいは企業サイトのロゴなどもたいていは画像で作成されています。

例えば、画像に直接テキストを記入した場合はこのようになります。

けれども、このように画像で文字を表示させてしまうと、検索エンジンのロボットには何が書いてあるのかが分からないため、SEO対策上のデメリットがあり、アクセスアップの面では不利と言われています。

■WEBフォントはSEO対策に有利

そのような時、WEBフォントを利用すれば、サーバー上にアップロードした美しいフォントを「テキスト」のままで表示させることができます。

・「画像に直接記入」 → 画像なので検索エンジンが読めない
・「WEBフォント」 → テキストなので検索エンジンでも読める、SEO対策に有利

また、ロゴやタイトルだけでなく、コンテンツの文章全体にもオリジナルのフォントで表示できるメリットがあります。

このWEBフォントの実際の使い方についてですが、サーバー上に使いたいフォントをアップロードしたのち、CSSに「@font-face」を設定して使用することができます。
→ @font-faceで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」は複数のフォントファイルが格納されたコレクションタイプといった違いがあります。

これらのパソコンのフォントファイルに対し、「.woff」はフォントデータが圧縮されているため、読み込み時間が短縮されるなどのメリットがあります。

そのため、「.otf」や「.ttf」などを「.woff」や「.woff2」に変換したのち、サーバーにアップロードして使用することをおすすめします。WOFFコンバータなど、変換するための無料ツールがネット上で公開されていますので、それらを使用して変換するとよいでしょう。

上記のようにメリットが多いWEBフォントですが、日本語のサイトではあまり使用されていません。

英語はアルファベットのため、せいぜい26文字程度しかありませんが、日本語には漢字やひらがな、カタカナなどもあり、フォントのファイル容量が膨大になりがちです。そのため、日本語のサイトでWEBフォントを利用するには適していないと言われています。

例えば、Google Noto Fontsでも英語は「16MB」となっているのに対し、日本語は「115MB」程度もあるため日本語フォントは容量はかなり大きいです。

日本語フォントファイル容量

転送量が大きくなることで読み込みの遅延が生じるデメリットがありますし、フォントの著作権によっては費用もかかるため日本ではあまり普及していません。

■サブセット化とは？

もし日本語のサイトでウェブフォントを利用する場合、必要なフォントのみを抜き出して使うと容量を削減することができます。全てが入ったフルセットのウェブフォントはファイル容量が大きいですが、サイト内で使用するフォントのみをのみを抜き出してサブセット化することにより、容量を削減することができます。

当サイトの「ホームページの作り方」のタイトル部分についても、この10文字のみを抜き出してサブセット化しているため、ファイル容量を削減して使用しています。

サブセット化

ファイルの中身はこちらのサイトなどで確認することができますが、デフォルトの格納文字はこのように数が多いです。

デフォルトの中身

ここから必要な文字だけを抜き出してサブセット化して当サイトでは使用しています。

サブセットの中身

そのため、仮にサイト全体にWEBフォントを指定したとしても、この「ホ」や「ー」、「ム」などの10文字以外はデフォルトのフォントで表示されることになります。

もしロゴなどの一部の箇所だけではなく、サイトのコンテンツ全体で使用する際には、ひらがなやカタカナ、常用漢字などの一式をサブセット化して使用されるとよいでしょう。

このサブセット化する際のツールはサブセットフォントメーカーがおすすめですが、ネット上でフリーソフトがいくつか公開されていますので、容量を削減してから使用することをおすすめします。