@font-faceでWEBフォントの指定方法

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

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

フォントフォルダ

次に、CSS側で「@font-face」を記載して、アップロードしたWEBフォントのfont-familyを指定します。書き方は「@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フォントで表示されます。

ホームページの作り方

「font-family」で指定する前の段階でWEBフォントを読み込む必要がありますので、「@font-face」をCSSの最初の方で指定しておくとよいでしょう。

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

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

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

CSSでの「@font-face」の記載方法

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, sans-serif;}

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

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

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

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

複数を指定する場合

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

@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("メイリオ")などといった形になりますが、日本語の場合は引用符で囲むことをおすすめします。また、ブラウザやOSによって表記が違うため、local(Meiryo)などの英語表記も指定しておくとよいかと思います。

ただし、フォントによっては著作権があるはずなので、サーバーにWEBフォントとしてアップロードして使用する際にはライセンスの購入が必要になるかもしれません。

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

次のページ → Webフォントサービスを比較