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

CSS3から「@font-face」ルールが指定されたことで、ホームページでWEBフォントが使えるようになりました。「.woff」や「.woff2」などのフォントファイルをサーバーにアップロードしたのち、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にそのまま指定するだけで特に問題なく表示されるはずです。

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: 使いたいフォント名;}

ちなみに、この「@font-face」の場所については、CSSの先頭部分で「@charset "UTF-8";」などの文字コードを指定した直後に書かれていることが多いと感じています。どこに書いても表示されるとは思いますが、できるだけフォントを先に読み込む形にしておいた方がよいかと思います。

複数を指定する場合

上記ページの「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フォントとしてサーバーにアップロードして利用する際には著作権の問題があるため、よく確認してから利用するようにしましょう。