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

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フォントを多用しすぎないようにしましょう。