ダサいフォントはもう卒業!WEBフォントでクールな文字を表現しよう!


これまでのホームページ上のフォントは、閲覧するパソコンに含まれるフォントを使って表示されていました。
ユーザーの見る環境によって使えるフォントが決まっていたので、フォントには制限があったんですね。
CSS3から使えるようになったWEBフォントは、サーバー上のフォント情報を使って表現できるので、制作者側がフォントを自由に使えるようになりました。
※以前からIEではこの方法が実装されていましたが、最近のChromeやSafariでも使用できるようになったため、一気に広がった感じです。

たとえば、次の一文のように、WEBフォントを使えば、これまでとは違ったフォントを使って表現することができます。

WEBフォントを使いこなせれば、新しい表現が可能になります。

これ、画像じゃないですよ、テキストなんです。
マウスでドラッグするとコピーだってできてしまいます。

テキストで表現できるということは、もちろん文字の大きさや色だって簡単に変更できます。

WEBフォントを使いこなせれば、新しい表現が可能になります。
WEBフォントを使いこなせれば、新しい表現が可能になります。
WEBフォントを使いこなせれば、新しい表現が可能になります。
WEBフォントを使いこなせれば、新しい表現が可能になります。

すごく便利ですよね。
これまで、フォントの表現には限界があったのですが、
これでこれまでのフォントの制限がなくなったので、見出しの表現などにもバリエーションが出てくるでしょう。
そんなWEBフォントの使い方をマスターして、ホームページのデザインを一歩進めてみましょう。

WEBフォントの使い方

フォントの準備

まずは、使用するフォントを準備します。
欧文に対して、和文フォントというのは文字数が多いため種類が少ないですが、それでもたくさんの楽しいフォントが配布されています。
好きなフォントファイルを探してダウンロードしてみましょう。

漢字が使える!全部無料!日本語フォント41個

次に、フォントを誰でも使えるようにしなければいけないので、
先ほどダウンロードしたフォントファイルをサーバーに上げておきます。

フォントのアップロード

フォントの設定

次に、使用するフォントを設定します。
<head>内や外部CSSで次のスタイルを設定します。

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

後でフォントを使用するために名前を付けます。

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

使用するフォントを読み込ます。
少しややこしいですが、このような書き方をします。

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

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と同じです。
フォント名は先ほど@fint-faceで指定した名前を使います。

div{
    font-family:myfont;
}

これまで使えなかったフォントを使えるようになれば、これまでよりも表現の幅がぐっと広がることになるでしょう。
ぜひ、うまく使ってください。

ファイルのアップロードも細かい指定も難しい、
もっと簡単にWEBフォントを使いたい!
そんな人にはもっと簡単にWEBフォントをつかえる、Googleフォントの使い方はどうですか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です