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

CSS3から「@font-face」ルールが指定されたことで、ホームページでWEBフォントが使えるようになりました。.woffなどのフォントファイルをサーバーにアップロードしたのち、CSS側で「@font-face」を記載して使うことができます。

例えば、Googleの無料フォント「Noto Fonts」などをダウンロードして、圧縮された「.woff」形式のファイルに変換したのち、自サイトに「fonts」などの適当なフォルダを作成してアップロードしたとします。

フォントフォルダ

そして、CSS側で上記の「@font-face」を指定することで、アップロードしたWEBフォントを使用することができます。書き方は「@font-face」の後にフォントファイルのある場所とそのfont-familyを指定するだけです。

@font-face {
font-family: sample;
src: url(https://www.homepage-tukurikata.com/fonts/sample.woff);
}

後は、実際にフォントを使いたい箇所でこの「font-family」を指定するとよいでしょう。

例えば、このように記述したとします。

<p style="font-family:sample;">ホームページの作り方</p>

すると、このようなNotoのWEBフォントで表示されます。

ホームページの作り方

この「CSS3」や「CSS2」の違いについてですが、htmlのようなバージョンの違いではなく、レベルの違いのため、「CSS3」を使用する際に何か特殊な指定や宣言をする必要はありません。

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

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

そもそもWEBフォントとは?

コントロールパネルで「フォント」の箇所を開くと、パソコンにデフォルトでインストールされているフォントの一覧を確認することができます。

プロパティを確認すると「.otf」や「.ttf」などの拡張子が付いていますが、「OpenType」や「TrueType」などの違いがあり、これらは主にパソコンにインストールして使うフォントになります。

  • OpenType フォント ファイル (.otf)
  • TrueType フォント ファイル (.TTF)
  • TrueType コレクション フォント ファイル (.TTC)

「OpenType」はマイクロソフトとアドビシステムズによる共同開発、「TrueType」はアップルコンピュータの開発によるものです。また「.TTF」は単体ですが、「.TTC」は複数のフォントファイルが格納されたコレクションタイプといった違いがあります。

ブラウザでサイトを閲覧する際、これらのインストールされているフォント以外は使用できないため、サイト上でオリジナルのフォントをCSSのfont-familyで指定するだけではきちんと表示されません。

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

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

例えば、上記の例はテキスト形式のWEBフォントですが、画像に直接文字を記入した場合はこのようになります。

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

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

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

・「画像に独自のフォントで書いた文字」 → 画像なので検索エンジンが読めない
・「WEBフォント」 → テキストなので検索エンジンでも読める、SEO対策に有利

フォントの容量が大きいと表示に遅延が生じるなどのデメリットもありますが、同じように表示されるなら、画像よりもWEBフォントの方がメリットが多いといえるでしょう。

このWEBフォントを利用する際、一般的にはMozillaが中心となって開発したWOFF (Web Open Font Format) 形式のフォントを使用します。このWOFFファイルの拡張子は「.woff」です。woffファイルはフォントデータが圧縮されているため、読み込み時間が短縮されるなどのメリットがあります。

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

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);
}

次に、実際に使いたい場所でそのフォント名を指定し、表示されなかった場合のためにメイリオなどの代替フォントを指定しておくとよいかもしれません。

p {font-family: Gentium, Meiryo;}

上の例文を参考にして、使いたいフォント名に置き換えれて使用すればよいでしょう。

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

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

複数を指定する場合

上記ページの「4.3. Font reference: the src descriptor」の箇所に例がありますが、WOFF2なども指定する場合は以下のように記述すればよいでしょう。

@font-face {
font-family: bodytext;
src: url(ideal-sans-serif.woff2) format("woff2"),
url(good-sans-serif.woff) format("woff"),
url(basic-sans-serif.ttf) format("opentype");
}

コメント内に「load WOFF2 font if possible, otherwise WOFF, else use OpenType font」とありますので、この場合は「WOFF2が可能ならそれを読み込み、そうでなければWOFF、そのほかの場合はOpenType font」を読み込む形になります。

一般的なCSSのような後方の上書きルールではなく、前方から合致したものが一個だけ読み込まれるため、適用したいものを前に記述するようにしましょう。

ローカルフォントが利用可能か参照する場合

上記の箇所のすぐ下にローカルフォントに関する記述がありますが、PC内にフォントがインストールされている場合、そちらを使うように指定した方がよいでしょう。

@font-face {
font-family: MyGentium;
src: local(Gentium),
url(Gentium.woff);
}

src: local(Gentium)の箇所になりますが、まずはlocal(フォント名)でパソコン内のフォントを利用可能かを一応は参照し、もし利用できなければ、url(Gentium.woff)にてWEBフォントをダウンロードする設定にしておくと効率的です。

このフォント名については、メモ帳を開いて「書式 - フォント」の箇所に表示されているフォント名をそのままコピペして正確に指定するとよいでしょう。

例えば、メイリオならlocal("メイリオ")などといった形になります。

ただし、詳細については未確認ですが、このメイリオについてもおそらくは著作権があるはずなので、サーバーにWEBフォントとしてアップロードして使用する際にはライセンスの購入が必要になるかもしれません。

「ユーザーのPC内にあるローカルフォント」を利用するようCSSで指定するのは問題ありませんが、WEBフォントとしてサーバーにアップロードして利用する際には著作権の問題があるため、よく確認してから利用するようにしましょう。

日本語フォントのサブセット化でファイル容量を削減

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

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

上記のNoto Fontsでも英語は「16MB」となっているのに対し、日本語は「115MB」程度もあり、日本語フォントは容量が大きいです。

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

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

サブセット化とは?

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

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

サブセット化

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

デフォルトの中身

ここから必要な文字だけを抜き出してサブセット化したものが上記のサンプルWOFFになります。

サブセットの中身

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

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

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

また、最近はWOFFよりも圧縮率の高い「WOFF2」形式に移行されつつあります。たいていのブラウザではほぼ対応しているため、今後はWOFF2形式で最適化するとよいかもしれません。

Google Fontsの使い方

英語サイトでWEBフォントを簡単に使用する際にはGoogle Fontsを利用するのが便利です。

日本語フォントの場合、サブセット化しないと容量が多くて微妙ですが、アルファベットや数字のみの英語ならフルセットで使用してもそれほど気にはならないかと思います。

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

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

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

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

4番目に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」があります。当サイト運営者は使用したことがないため詳細は不明ですが、チェックされてみるとよいでしょう。