CSS3 – @font-faceでかっこいいWebフォントを使う方法


Webフォントを使えばこんなフォントが画像をつかわずに簡単に表示できます。

Welcome to my blog

Webフォントについてはこちら
メリットいっぱいのWEBフォントでデザインと運用効率を両立。WEBフォントについて知っておこう。

実際にWebフォントを使うときに必要な手順を少し詳しく紹介します。

Webフォントを使うための手順

フォントファイルをサーバーへアップロード

Webフォントを使うには、
誰でもそのフォントを表示できるようにあらかじめサーバーにフォントファイルを用意しておかないといけません。
自分で用意してもいいし、許可されていれば他の人が公開しているフォントを使っても構いません。
自分でフォントを用意して使う場合は、まずファイルをサーバーにアップしましょう。
サーバーのわかりやすい場所にフォントファイルをアップしましょう。

フォントのアップロード

font-faceで使用するフォントを指定する

フォントをサーバーにアップするだけではもちろんフォントは使えません。
アップしtフォントを呼び出すためにfont-faceの指定をします

@font-face {
    font-family: myfont;                    /* フォントに名前を付ける */
    src: url('font.otf') format('opentype');  /* フォントのURLを指定する */
}

font-familyではこのフォントに名前を付けます。

font-family: myfont;                    /* フォントに名前を付ける */

後でこの名前を使ってフォントを適用するのでわかりやすい名前を付けましょう。
srcでは呼び出すフォントを指定しています。
url()ではフォントのある場所を、format()ではそのフォントのフォーマットを指定します。

src: url('font.otf') format('opentype');  /* フォントのURLを指定する */

format()がよくわからないですよね。
format()はファイルの拡張子から、次の対応表で設定ができます。

形式 拡張子 format()の値 概要
TrueType .ttf truetype WindowsやMacで使われる一般的なフォント形式
OpenType .ttf, .otf opentype PostScriptとTrueTypeを統合したフォント形式。TrueType形式で作成されたものは「.TTF」、PostScript形式のものは「.OTF」となる
WebOpenFontFormat(WOFF) .woff woff Web用の新しいフォント形式。データが軽いのが特徴。
EmbeddedOpenType(EOT) .eot embedded-opentype 米マイクロソフトが開発したWebページ用のフォント形式。IEのみ対応
SVG Font .svg, .svgz svg SVGを利用したフォント形式

font-familyでフォントを適用する

先ほど指定したフォントを実際に適用してみます。
font-faceで付けた名前を使います。

div{
    font-family:myfont;
}

少し手順はあるけれど、そんなに難しくはないでしょ。
実際に使うとこんな感じになります。

Welcome to my blog

フォントはどこで手に入れたらいい?

肝心のフォントファイルはどこにあるのか。
欧文のアルファベットのフォントは無料でたくさんあるのですが、
和文フォントは無料のものは多くはありません。
圧倒的に和文フォントは文字の数が多く、なかんか無料でというわけにいはいかない事情もあります。
だけれど、それでも優良なフォントがいくつか公開されていますので、
ライセンスを確認してこういったものを使ってもいいでしょう。

無料で自由に使えるフォントがこんなに!漢字の入ったフリーの日本語フォント

お金を払ってでも高品質で安心して使いたいという場合は、
大手も使っているような、有料の高品質フォントがたくさんありますよ。

★執筆中

Webフォントはとっても便利だけれど、
フォントを使用するためにフォントデータをダウンロードしなければいけないので、
ページの表示が通常よりも時間がかかってしまいます。
ここぞというときに使うようにして、あまりWebフォントを多用しすぎないようにしましょう。

もっと簡単にWebフォントを使うには?

FTPを使ってフォントをアップする手順が結構面倒だったりしますが、
もっと簡単にWebフォントを使う方法もあります。
GoogleFontsを使えば、煩わしい作業もしなくても、
簡単な手順に従うだけでWebフォントを使えますよ。
GOOGLEフォントを利用して、超簡単にWEBフォントを使おう!