CSS3からwebフォントが使えるようになりました。欧米フォントやアイコンフォントは無料かつ著作権フリーに限定しても結構充実しています。
和文フォントも少しずつ増えてきているようです。
webフォントを使う際は、ライセンスを確認して提供者の指示に従って使ってください。
個人使用は大丈夫でも商用利用には何らかの制限を設けている場合もありますし、再配布禁止の場合は使い方に気を付ける必要があります。
ただ、全てのテキストをwebフォントにすると、とくに日本語の場合webページの表示が重くなる可能性があります。スマートフォンなどではそれが顕著になると思うので、現状使用箇所は限定的にした方がよさそうです。
webフォントを使う前に、大事なのはどのwebフォントを使うかを決めることです。
webサイト全体の雰囲気であるとか、目的によって視認性が高いほうがいいのか、とにかく目立つように装飾性を優先したいのか・・・など、さまざまなことを考えて選択してください。
ダウンロードする場合はファイルサイズも考慮に入れましょう。
ちなみに、よくよく考えると、ほんとにwebフォントを使う必要があるのかなぁってことになるかもなので、OSに標準搭載されているフォントの一覧もリンクしておきます。
使いたいフォントを見つけたら、ライセンスを確認してください。
仕事で使う場合は特に、有料・無料問わず、商用の利用条件をよく確認しましょう。
使い方は難しくないです。
webフォントをダウンロードしてきて、サーバの適切な場所にアップしてください（ダウンロードしないで直接フォント提供サイト（等）のサーバから利用する場合もあります）。
/* IE */
@font-face {
font-family: フォント名;
src: url(font/フォント名.eot);
}
/* Firefox, Opera, Safari */
@font-face {
font-family: フォント名;
src: url(font/フォント名.ttf) format(”truetype”);
}
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
上記のように@font-faceでダウンロードしたフォントのパスを指定します。
ieでも表示させたい場合は拡張子eotというファイルが必要になります。フォントファイルの拡張子については下記のリンクリストの説明ページにあったりするので、参照してください。
h1 {
font-family: ‘フォント名’;
}
あとはこんな感じにfont-familyでフォント名を指定して、いつも通りテキストをタグに流し込めば使用できます。
アイコンフォントの場合は専用の文字コードを指定して使います（class名で指定するタイプもあります）。
また、Google Web Fontsや一部のwebフォントはCDN（Contents Delivery Network）として提供しているので、ダウンロードせずに、フォント提供元（等）のサーバにあるcssファイルを指定して利用することもできます。
じつは、こちらの方が高速化できます（ある日突然、サービスを打ち切られるとか、提供元のサーバがダウンするとかのリスクはありますが）。
linkタグで提供元サーバのcssファイルのパスを指定して、font-familyでフォント名を指定すれば、使えます。
アイコンフォントはclass名を指定するだけで、使えるだけでなく、回転させたり、重ねて使えたりといったこともできるものもあります。
この「コーダー日誌」でも、一部でFont Awesomeというアイコンフォントを使っています。
CDNサービスを使用する際は、ローカル環境で制作したページを見てもwebフォントは表示しません。必ずサーバにアップして、インターネットを介して閲覧しましょう。