2015年10月19日Webフォントを使うHTML・CSSフォント次第でサイトの印象は思った以上に変わります。従来Webサイトで表示されるフォントは、ユーザーの利用環境に依存していました。そこで、CSS3で登場した「@font-face」を利用します。未対応のIEでも好きなフォントでタイポグラフィを表示できます。完成イメージデフォルトで表示されるフォントです。目的のフォントで表示することができます。Webフォントを利用するまでの流れブラウザで表示可能な形式一覧Webフォント作成ファイル構成コード解説IE9で.woffを読み込むには?Webフォントを利用するまでの流れWebフォントは、以下のような流れで利用します。1フォントファイル(TTFやOTFファイル)を準備。↓2フォントファイルをサーバーへアップロード。↓3スタイルシートで読み込む。ブラウザで表示可能な形式一覧まず、各ブラウザで表示可能なフォント形式をチェックします。一般的に、パソコンにインストールされているフォントは「TTF」「OTF」形式です。旧IEではEOT形式でなければ表示できません。モダンブラウザでは、WOFFという見慣れない形式です。古いiPhoneなどで使われているiOSでは、SVG形式でなければ表示できません。一つのフォントでは、全てのブラウザをカバーしきれないのが現状です。TTF、OTFWebフォント作成Webフォントを各ブラウザへ対応させるため、複数の形式のファイルを用意します。「TTF」を「OTF」や「SVG」に変換します。GENERATOR」というサービスを利用します。GENERATOR」を開きます。FONTS」ボタンをクリックし、フォントファイルを選択します。3「BASIC」「OPTIMAL」「EXPERT」の3つのメニューがあります。「OPTIMAL」が推奨されているため、これを選択します。4「Agreement」にチェックを入れると「Download」ボタンが出現します。ファイルをダウンロードします。5ダウンロードしたZipファイルを解凍します。ファイル構成ファイルをサイトのフォルダに配置します。サイトフォルダ名を「sample」とします。作成したsvgなどのWebフォントファイルを、fontフォルダに配置します。※wordpress基準ですが、wordpressでなくても作成できます。normal;フォント名「’lobster_1.4regular’」を記述します。format('svg');}各フォントファイルへのパスを記述します。「font」フォルダを参照するため、「../font」と書きます。ファイルは、上に記述したファイルが優先されます。例)Firefoxの場合、表示可能な形式は、TTF、OTF、WOFFです。上の記述がWOFFであるため、WOFFを優先します。url('../fonts/lobster_1.4-webfont.eot');.eotファイルへのパスです。IE用の記述で、IE9の互換モードに向けたものです。IE9互換モードは.woffを使えないためこの記述があります。url('../fonts/lobster_1.4-webfont.eot?#iefix')format('embedded-opentype'),.eotのあとに「?」があり、format(‘embedded-opentype’)と続いています。IE8以下では、「?」以降の記述をクエリ文字列として扱い、実際にはそれ以降を無視します。.eotファイルが使用されます。url('../fonts/lobster_1.4-webfont.eot?#iefix')format('eot'),IE以外のブラウザでは、format(‘woff’)のように、ファイルフォーマットを指定する必要があります。IE8以下の場合は記述しません。上記の「format(‘embedded-opentype’)」のままでは、IE9でも.eotが読み込まれます。そこで、「format(‘embedded-opentype’)」をわざと正しくない表記の「format(‘eot’)」にします。すると、IE9で開いたとき、.woffが読み込まれるようになります。※「format(‘embedded-opentype’)」をわざと間違った記述にする方法はよく用いられます。