IEにも対応したWebフォントの使い方について

CSS3の@font-faceでWebフォントを使う時の書き方と、フォントファイルについてです。IEで対応するには書き方とフォントファイルが独自のものになります。

@font-faceでWebフォントを使う時はフォントファイルをサーバーにアップロードして使います。Google ChromeやFirefox、Safariなどではフォントファイルは一般的なフォントファイル形式の TrueType Font(.ttf) や OpenType Font(.otf) がそのまま使用できますが、IEでは Embedded Open Type(.eot) のファイルでないと使用できません。

Webフォントとして利用できるフォントでも.eot のファイルがない場合があるかと思いますが、そんな時はファイルを変換するWebサービス等を利用して.eot ファイルへ変換できます。

.eot ファイルへの変換方法

ttf2eotを利用する

※追記2015/05/08 現在、ttf2eotはWeb上のサービスではなくなっているようです。下の「WOFFコンバータ」が使い方が簡単です。

ttf2eot は .ttf ファイルを .eot ファイルへ変換するWebサービスです。
使い方も簡単で、”ttf2eot”にアクセスし、フォントファイルを選択して”Convert to .eot”をクリックするだけです。
ttf2eot
サクッとファイルの変換ができます。

WOFFコンバータを利用する

WOFFコンバータはフォント形式を変換できるソフトウェアです。Windows用とMac用とあります。
WOFFコンバータ

Free Online Font Converter を利用する

.ttfファイルではなく、.otfファイルしかない場合は Free Online Font Converter を利用して .ttfファイルへ変換する事ができます。

Free Online Font Converter は .ttf から .otf 、.otf から .ttf へ変換も出来るWebサービスです。その他にも、pfa, pfb, pt3, sfd, ttf, otf, otb, t42, cef, cff, gsf, ttc, svg, ik, mf, dfont, bin, suit and bd の形式を扱えるようです。

Free Online Font Converter

こちらのサイトで .ttf ファイルへ変換し ttf2eot で .eot ファイルに変換して対応できます。

Web Embedding Fonts Tool を利用する

Web Embedding Fonts Tool はマイクロソフトが配布しているフリーソフトです。

ダウンロード:Microsoft Typography – Features of TrueType and OpenType

Web Embedding Fonts Tool

実際使ってみていませんが、動作が重いようです。Webサービスの方が手軽に利用できる感じですね。

@font-faceの書き方

@font-faceの書き方はIE用の記述も必要になり色々書き方があるようですが、こちらの記事「安全な@font-faceの書き方(抄訳) – Weblog – hail2u.net」を参考にさせて頂き以下のような書き方がいいのかなと思いました。

(※なぜか半角で@fontとするとTwitterの@fontへリンクが自動で貼られてしまう為、以下コードの@を全角にしてあります。コピーする際はあとで@を半角に直して下さい。)

@font-face {
  font-family: 'Graublau Web';
  src: url(GraublauWeb.eot); 
  // IE用の記述
  
  src: local('Graublau Web Regular'), local('Graublau Web'), 
         url(GraublauWeb.otf) format('opentype');
   // IE以外用の記述。
   // ローカルに同じフォントファイルがあればそれを利用する。
}

src: url( )は各フォントファイルへのパスが入ります。
format(‘ ‘)はフォントファイルの形式が入ります。(IE用では必要ありません)

@font-face をCSSファイルの先頭に記入し、フォントを適用したい箇所へfont-familyの指定をします。

* { font-family: 'Graublau Web'; }

こちらの記事「Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ – かちびと.net」でその他の書き方や、Webフォントのメリット・デメリットやWebフォントをダウンロードできるサイトなどが紹介されています。参考になりました。

サンプルデモとIE表示のキャプチャ

実際に Museo フォントをWebフォントとして使ってみました。サンプルデモのコードは一番下にあります。

サンプルデモ

Webfont-demo|memocarilog

Museo フォントはフリーでダウンロード可能です。(※登録が必要です)
ダウンロード:Museo™ – Webfont & Desktop font « MyFonts
Museo フォント
Museo フォントをダウンロードしたらWebフォント用のファイルが同包されており、 .eot ファイルも入っていました!親切です。

IEでみた場合のキャプチャ

(※クリックで大きい画像がみれます)

IE8での表示

ie8で表示

IE7での表示

ie7で表示

IE6での表示

ie6で表示

サンプルデモのコード

(コピーの際は@を半角に直して下さい。)

CSSコード
@font-face {
  font-family: 'MuseoSans500Italic';
  src: url(MuseoSans_500_Italic-webfont.eot);
  src: local('MuseoSans500Italic'), local('MuseoSans500Italic'),
         url(MuseoSans_500_Italic-webfont.ttf) format('truetype');
}
html { padding: 0; margin: 0; }
body { padding: 0; margin: 0;
	font-family: 'MuseoSans500Italic';
}
h1,p { padding: 20px 0; }
#container{	width: 600px;margin: 0 auto; padding: 0 50px; }
.text{ font-size: 100%; }
HTMLのbody部分コード
<div id="container">
<h1>Webfont-demo|memocarilog</h1>
<p>Museoフォントを使ったWebフォントのデモページです。</p>
<img src="lotus.jpg" alt="lotus" width="600" height="399" />
<p class="text">
Lorem ipsum …
</p>
<p class="text">
Lorem ipsum …
</p>
<p><a href="https://memocarilog.info/webdesign/4191#sample">元のページへ戻る</a></p>

Related Article

1 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル 素材 コンテンツ Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ