CSSでWEBフォントを指定する方法

CSS3から「@font-face」ルールが指定されたことで、WEBフォントが使えるようになりました。このCSS3やCSS2の違いについてですが、htmlのようなバージョンの違いではなく、レベルの違いになりますので、これを使うのにサイト運営者側が何か特殊な指定や宣言をする必要はありません。

今までのCSS1や2に新しい機能が追加されていく感じになりますが、このレベルアップに対してブラウザが対応していれば特に問題なく表示されます。

古いブラウザでは、CSS3で書くと正常に表示されないプロパティーもあるかもしれませんが、この「@font-face」についてはわりと古いブラウザでも対応しているため、特に問題なく表示されるはずです。

CSS3自体は既存サイトでもそのまま使えますし、html5などと合わせて使う必要もなく、今あるCSSに指定するだけで普通に使えます。

WEBフォントとは?

コントロールパネルで「フォント」の箇所を開くと、パソコンにデフォルトでインストールされている標準的なフォントの一覧が表示されますが、サイト上のCSSのfont-familyでこれ以外のフォントを指定してもきちんと表示されません。

サイト上で独自のフォントを使用するには、閲覧者のPCにもそのフォントがインストールされている必要がありますので、標準的なフォント以外は指定しないのが一般的です。

もし、サイト上で使いたいオリジナルなフォントがあれば、画像に文字を書いて、どのような環境でも同じように表示させるのが一般的ですが、ロゴやタイトルバナーなどではこの方法がとられることが多いです。

けれども、この場合、テキストではなく画像で表示されるため、検索エンジンのロボットでは何と書いてあるのかは判別できませんので、SEO対策上のデメリットがあり、アクセスアップの面では不利と言われております。

そんなとき、WEBフォントを利用すれば、サーバー上にあるフォントが利用されますので、閲覧者の環境に依存せずに意図したフォントを「テキスト」のままで表示させることができます。

・「かっこいいフォントで画像に書いた文字」 → 画像なので検索エンジンが読めない
・「WEBフォント」 → テキストなので検索エンジンでも読める

CSSでのWEBフォントの使い方

CSSでの指定方法については、W3Cの「4.1 The @font-face rule」の箇所に例文が書いてありますが、@font-faceのあとにフォント名を登録させ、そのあとにフォントファイルのある場所を指定するとよいでしょう。

@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff);
}

次に、実際に使いたい場所でそのフォント名を指定し、表示されなかった場合のために、serifなどの代替フォントを指定しておきます。

p { font-family: Gentium, serif; }

上の例文でのGentiumというフォントが実在するのかは分かりませんが、これを使いたいフォント名に置き換えれて使用すればよいでしょう。

@font-face {
font-family: 使いたいフォント名;
src: url(フォントファイルのある場所);
}

p { font-family: 使いたいフォント名, serif; }

日本語サイトではWEBフォントの使用を避ける

ここまで書いてきて何ですが、日本語サイトでこのWEBフォントはあまり使われていません。

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

転送量が多くなることで読み込みの遅延が生じ、サイトが重くなるデメリットがありますし、フォントの著作権によっては費用もかかりますので、現状ではほとんど普及していません。

なので、日本語サイトではWEBフォントは使用せず、英語サイトでの使用に限定した方がよいでしょう。

英語サイトで使用する際には、Google Fontsを利用するのが便利です。

外部CSSを利用する形になりますが、フォントファイルを自分でサーバーにアップロードする必要がなく、html側でグーグルフォントの外部CSSを指定して、CSS側で使いたいfont-familyを指定するだけで簡単に利用することができます。

Google Fontsの使い方

使いたいフォントを選び、「Quick-use」の箇所をクリックすると詳細が表示されます。

1番目と2番目の箇所でboldなどの使用するタイプを選択しますが、選びすぎるとサイトの表示が重くなります。右側にメーターが表示されていますので参考にするとよいでしょう。

3番目に外部CSSの箇所を指定するhtmlタグが表示されますので、そのフォントを使いたい全てのページのhtmlファイルのheadタグ内に貼り付けます。

4番目にfont-familyが表示されていますので、こちらは元からあるCSS側で指定します。

順番としては、元からあるCSSよりも、グーグルフォントの外部CSSが先に読み込まれるようにした方がよいと思いますが、どちらでもきちんと表示されていました。

英語サイトを構築する場合や、サイトタイトルでアルファベットを使用している場合は使ってみるとよいかもしれません。