tro-suke blog

CSS3でWebフォントを使ってみる

サイトをリニューアルして、知り合いのスマホで確認したとき、サイトのタイトルが斜体で表示されていました。フォントがないから当然とあまり気にしていませんでしたが、やはりサイト名は少しはこだわりを持って表現しないとね…。以前のように画像にしてしまえば簡単なのに、今回はちょっとCSS3にこだわってみました。

CSS2.1ではfont-familyプロパティで、フォントファミリーを指定できますが、それはパソコンにインストールされているフォントを指定する必要がありました。ですから自分の環境ではきれいに見えても、すべての人が同じように見えるとは限りません。普通そういったときのことも考えてfont-familyプロパティでは、WindowsでもMacでも似た表示にさせるため複数のフォントを指定したり、あるいは大ざっぱにsans-serifとかserifのみの指定にしていました。

CSS3では、Webフォントという機能が使えます。Webフォントとは、サーバー上にあるフォントを利用するもので、ユーザーの閲覧環境に依存せずに表示できるという、大変ありがたい機能なのです。方法としては使用したいフォントをサーバーにアップロードし、CSSで読み込ませるだけで利用できるので、フォントの選択肢が広がりますね。ですが、ここで注意しなければならないのが、ライセンスの問題です。一般のパソコンに入っているフォントは、Webフォントに許可されていなかったり、著作権フリーであっても再配布は禁止されているものが多かったりします。

そこでライセンス問題を気にせずに使える「Webフォントサイト」を利用してみました。現在は海外の欧文フォントサイトだけでなく、和文フォントが使えるサイトも増えてきています。tro-sukeで使用するのはこのサイト名だけですので、Google Web Fontsを使用することにしました。

使い方は簡単で「Preview Text: 」の所に表示させたい文字を入力すると直接確認することができます。フォント一覧から好みのフォントを選びます。Quick-useのボタンをクリックすると次のページに進みます。下の方にスクロールするとlinkコードとスタイルシートの記述が表示されていますので、それをコピペすればいいだけです。