1. まとめトップ

CSS3ウェブフォントを日本語で使うための情報全て

ウェブページのデザイン性を大幅に改善するCSS3ウェブフォント。既に海外では広く普及していますが、日本語で利用するにはまだいろいろな障害が多いのが現状です。日本語でCSS3ウェブフォントを利用するために必要な最新の情報をまとめました。

更新日: 2011年09月25日

14 お気に入り 27180 view
お気に入り追加

この記事は私がまとめました

apptaroさん

CSS3ウェブフォントとは?

CSS3ウェブフォントを利用すると、ページ制作者は任意のフォントをウェブページで使用できるようになります。具体的にはフォントデータをサーバーに配置して配信することで、ユーザーはローカル環境にインストールされていないフォントを表示できるようになります。

CSSウェブフォントを利用することで、今までは画像を作らないといけなかったような特殊なフォントを利用したデザインを簡単に制作することができます。これによってデザイン内のテキストを簡単に更新できるようになり、またSEO的にも有利になります。

CSS3ウェブフォントを利用する方法には大きく分けて2つあります。1つは日本語対応ウェブフォントサービスを利用する方法、もう1つは手持ちのフォントをCSS3ウェブフォント用に変換して利用する方法です。

日本語対応ウェブフォントサービス

日本語対応ウェブフォントサービスを利用すると、CSS3ウェブフォントを簡単に利用することができます。使い方は簡単です。各ウェブフォントサービスにユーザー登録をして、手順に従ってHTMLにタグを記述するだけです。

日本語対応のウェブフォントサービスはまだまだ数が少ないのが現状です。日本語フォントの制作には膨大なコストがかかるので、そのフォントデータをサーバー上で公開するのには大きな抵抗があるのでしょう。現状では無料プランを提供している「デコもじ」「Fonts.com」、有料プランだけを提供している「フォントプラス」の3つだけです。2011年度内にはモリサワが新たにウェブフォントサービスを提供する予定のようです。

海外ウェブフォントサービス

日本語フォントは使えませんが、海外には多くのウェブフォントサービスが存在します。アルファベットのフォントだけを使いたい場合はこれらのサービスを利用することができます。

手持ちのフォントをCSS3ウェブフォント利用する方法

お手持ちのフォントをCSS3ウェブフォントとして利用することもできます。お手持ちのフォントをCSS3ウェブフォント用に変換してウェブサーバーに配置し、@font-faceをCSSスタイルシートに記述するだけです。

注意点としてはフォントのライセンスに気をつけなければならないという点です。PCに最初からインストールされていたフォントも、購入したフォントも、それぞれ異なるライセンスや利用規約があります。それぞれのフォントはそのライセンスまたは利用規約の範囲内でしか利用してはいけないことになっています。無料で公開されているフォントについても、どのような利用の範囲内で無料なのか確認する必要があります。

ウェブフォント対応フォントの作成方法

ウェブページで使いたいフォントのライセンスを確認したら、フォントデータをCSS3ウェブフォントとして利用できるファイル形式に変換します。クロスブラウザでCSS3ウェブフォントを反映させるには、TTF形式、WOFF形式、EOT形式、SVG形式の4形式のフォントデータを準備する必要があります。

フォントデータの変換には「Font Squirrel」が便利です。海外のサイトですが、日本語フォントにも対応しています。容量制限でこのサービスが使えない場合、武蔵システムの「WOFFコンバータ」とApache Batik SVG Toolkitの「SVG Font Converter」の2つのツールを利用してフォント変換をすることができます。

ウェブフォントを利用するCSS記述方法

CSS3ウェブフォント用のフォント変換ができたら、フォントデータをサーバーにアップロードして、スタイルシートに@font-faceの記述を追加するだけです。クロスブラウザに対応した記述方法は「Fontspring @font-face Syntax」を参考にしてください。

参考リンク

1





このまとめへのコメント1

  • チロサンさん|2011.09.26

    CSS3でコーディングはしたことがあったんですが、CSSウェブフォントは初めて聞きました!
    紹介から記述方法までトータルで紹介してあるので、とても解りやすかったです☆
    情報ありがとうございます!勉強します!!

1