ウェブフォントを使用して、好きなフォントを表示させる

基本的にフォントの表示は、各ユーザーのコンピューターにインストールされているフォントで表示されるので、いくら制作サイドで表示させたいフォントを指定しても、そのフォントがインストールされていなければ表示させることはできない。
よって、意図するフォントを表示させるには画像化して表示させるしかありませんでした。
そこで、CSS3の新機能を利用した「ウェブフォント」の登場です。いくつかその方法をご紹介します。

フォントファイルをサーバーにアップロードしてウェブフォントを使う

これは、自身のサーバーにフリーフォントや自分で作成したフォントをアップロードして、それを以下のような形でCSSに記述して表示させます。

＠font-face {
   font-family: フォント名;
   src: url('ファイル名') format("フォントタイプ");
}

フォント名は任意の名前を付けることができます。上記のように定義したら、あとはそのフォントを使用したい要素に指定してあげるだけです。

h1 {
   font-family: 上記で定義したフォント名;
}

ただ、ライセンスフリーのフォントでも勝手にアップロードしてウェブフォントとして使用することはできなかったりする場合もあるので、使用する際にはよく確認してから使用するようにしてください。

Google Fontsを使用してウェブフォントを表示させる

Google FontsはGoogle社が提供しているウェブサービスで、簡単に多くの種類のウェブフォントを使用することができます。欧文フォントではありますが、使用する機会もあると思います。

Google Fontsの使用方法

まず、Google Fontsのサイトへアクセスします。

一覧で表示されるので、そこから好きなフォントを探します。目当てのフォントが決まっていれば、画面右上の「Search」から検索すると早いでしょう。「Categories」のチェックである程度、書体も絞り込めたりできます。
画面にカーソルをのせると、「Sentence」というセレクトボックスが出てくるので、そこをクリックして「Custom」を選択すれば、好きな文字を入力することもできるので、イメージがつきやすいかもしれません。
使いたいフォントが決まったら、右上のプラスアイコン（＋）をクリックします。